Hypertext Markup Language (HTML) 3
Elective C. b. Web Site Development
- Construct simple web pages.
- Students should be able to use different features (e.g. links, anchors, lists, tables, frames, Mailto and Fill-out Forms) in constructing the web page. They should also be able to embed multimedia elements in the web page and apply a consistent look and style across a set of web pages.
Lists <ol> <ul>
<li>
Ordered list:
<ol>
<li>first item</li>
<li>second item</li>
</ol>
- Attribute: type (e.g. 1, a), start (starting number), reversed (reverse the order)
Unordered list:
<ul>
<li>first item</li>
<li>second item</li>
</ul>
Fill-out forms <form>
<input> <textarea> <select> <option>
<form>
Single line text input <input type=”text” name=”…”>
Checkbox <input
type=”checkbox” value=”…”>
Radio button
<input type=”radio” name=”…” value=”…”>
Multi-line text
input <textarea name=”…” cols=”40” rows=”2”></textarea>
List
<select name=”…”
size=”3” multiple>
<option value=”first”>
first value </option>
<option value=”second”>
second value </option>
<option value=”third”> third value
</option>
</select>
Drop down list/menu
(no multiple attribute used)
<select
name=”…”>
<option value=”first”>
first value </option>
<option value=”second”>
second value </option>
</select>
Submit button
<input type=”submit” value=”Submit”>
Reset button
<input type=”reset” value=”reset”>
Advantage of using
reset button: reduce time for reloading
</form>
Mailto
There are numerous ways to submit the inputted data in the
form.
One of these is to send the data via email.
<form action=”mailto:abc@abc.com”
method=”post” enctype=”text/plain”>
- The use of mailto will launch the user’s email client.
- method=”get”: the data will be incorporated into the end of a URL. Good for simple form and data security is not a concern.
- method=”post”: the data included in the HTTP request body.
- enctype=”text/plain”: organize the data in a more readable format.
Cascading Style Sheets (CSS)
3 ways to use CSS.
Inline: use style attribute in <body> section – apply to
certain part or sentence
<p
style=”color:red;”> Hello World! </p>
Internal: use <style> within <head> section –
apply to whole web page
<head>
<style>
p
{
color: red;
}
</style>
</head>
External: use <link> to link to external CSS file
(.css) – apply to multiple web pages of
the website
- consistency in web pages design/formatting
- reusable (.css)
- easy maintenance
- follow current standards
No comments:
Post a Comment