HTML-Fundamental
HTML - Hyper text markup label
1.1 Introduction
1. W3C - World Wide Web consortium
- Structured standard languages (HTML, XML)
- Presentation Standard Language (CSS)
- Behavioral Standards (DOM, ECMScript)
2.1 HTML fundamental
2.1.1 Label
- Block element: no matter how much content, it will occupy one line e.g., p label, h1-h6 label
- Inline element: content expands in one line e.g., a label, strong, em
Index1.0 - basic label: titile-h, paragraph-p, special symbol-<
x<!--DOCTYPE: tell the browser what specification we want to use-->
<html lang="en"><!--head: web head--><head><!--meta: descriptive label, describe information of web, e.g., keywords, charset--><!--meta generally used for SEO--> <meta charset="UTF-8"> <meta name ="keywords" content="Web development"> <meta name ="description" content="Web learning"> <title>Title</title></head><body><!--title label--><h1>1</h1><h2>2</h2><h3>3</h3><h4>4</h4><h5>5</h5><h6>6</h6>
<!--paragraph label--><p>study in USYD</p><p>study in USYD</p>
<!--horizontal line label--><hr/><!--newline label-->study in USYD <br/>study in USYD <br/>
<!--Font--><strong>WEB3.0</strong><em>WEB3.0</em>
<!--Special symbols--><!--space-->space space<!--less than--><br><<br><!--greater than-->><br>©LILAPE WEB LEARNING</body>Index2.0 - img label
xxxxxxxxxx<body><!--img labelsrc: path of image (absolute path and relative path)../ upper levelalt: alert, while img is invalidtitle: hover text
--><!--<img src="../resources/img/1.jpeg" alt="fly pig" srcset="cute">--><img src="../resources/img/1.jpeg" alt="fly pig" title="cute" width="200" height="200"><a name="down">down</a></body>Index3.0 - a label: basic link, anchor link, functional link
xxxxxxxxxx<body><a name = "top"><em><strong>top tag </strong></em></a><!--a labelhref: which page jump totarget: determine which window_blank(default): open new tab_self: open in current window--><a href="http://www.google.com" target="_blank">jump to google</a><br>
<!--img as a link--><a href="http://www.google.com"> <img src="../resources/img/1.jpeg" alt="fly pig" width="200"></a>
<!--anchor link: to jump to specific position1. define a tag(position)2. jump to the tag--><p> <a href="http://www.google.com"> <img src="../resources/img/1.jpeg" alt="fly pig" width="200"> </a></p><p> <a href="http://www.google.com"> <img src="../resources/img/1.jpeg" alt="fly pig" width="200"> </a></p><p> <a href="http://www.google.com"> <img src="../resources/img/1.jpeg" alt="fly pig" width="200"> </a></p><p> <a href="http://www.google.com"> <img src="../resources/img/1.jpeg" alt="fly pig" width="200"> </a></p><p> <a href="http://www.google.com"> <img src="../resources/img/1.jpeg" alt="fly pig" width="200"> </a></p>
<!--anchor link1--><p><a href="#top">back to top</a></p><!--anchor link2--><p><a href="02img.html#down">back to 02img.html</a></p>
<!--functional link-->
<p> <a href="mailto:lilape970403@gmail.com">contact me </a></p></body>2.1.2 list
Ordered list-ol
Unordered list-ul
Custome list-dl
Example of using list
xxxxxxxxxx<body><!--or and ur listfunction: navigation, sidebar--><ol> <li>Python</li> <li>Java</li> <li>JavaScript</li></ol><br><ul> <li>Python</li> <li>Java</li> <li>JavaScript</li></ul>
<!--custom listfunction: the bottom of company's official web--><dl> <dt>Explore more</dt> <dd>Customer service</dd> <dd>Join us</dd> <dd>Contact us</dd></dl></body>2.1.3 table
Characteristic:
- easy to use
- stable structure
Basic structure:
- cell
- row
- column
- across rows
- across columns
xxxxxxxxxx<body><!--table:row: trcol: td--><table border="1px"> <tr><!--colspan--> <td colspan="5">1-1</td><!--<td>1-2</td>--><!--<td>1-3</td>--><!--<td>1-4</td>--><!--<td>1-5</td>--> </tr> <tr><!--rowspan--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> <td>2-5</td> </tr>
<tr><!--<td>3-1</td>--> <td>3-2</td> <td>3-3</td> <td>3-4</td> <td>3-5</td> </tr></table></body>2.1.4 Video and Audio
xxxxxxxxxx<body><!--Video--><video src="../resources/video/毕业典礼.mov" width="400" controls></video><!--Audio--><br><audio src="../resources/audio/intro.mp3" controls autoplay></audio></body>2.2 Page structure analysis
General web includes:
- Header
- Footer
- Section
- Article
- Aside
- Nav
2.3 iframe
Embedding one web page into another web page
xxxxxxxxxx<body><iframe src="01fundamental.html" name= "hello" frameborder="0"></iframe></body>xxxxxxxxxx<body><iframe src="" name= "hello" frameborder="0"></iframe><a href="02img.html" target="hello">click to see a cute pig</a></body>2.4 form
| attributes | description |
|---|---|
| type | define type of elements. text(default), password, checkbox, radio, submit, reset, file, hidden, image, button |
| name | Define the name of form |
| value | define the initial value of elements (when type is radio, a value must be specified) |
| size | define initial width of form |
| maxlength | the maxlength of text or password |
| checked | when type is radio or checkbox, specified a selected button |
2.4.1 form elements
xxxxxxxxxx<body><!--formaction: where the form is submittedmethod: post, getget: submitted information can be seen in the url, unsafe but efficientpost: safe, large file can be submitted--><form action="01fundamental.html" method="get"><!--textbox input--><p>usr: <input type="text" name="Username"></p><p>pwd: <input type="password" name="Password"></p><!--radiovalue: value of radioname: group--> <p> Sex: <input type='radio' name="sex"/>Male <input type="radio" name="sex"/>Female </p><!--checkbox--> <p> Hobby: <input type="checkbox" name="hobby" value="coding">coding <input type="checkbox" name="hobby" value="gaming">gaming <input type="checkbox" name="hobby" value="sing">sing </p>
<!--button--> <p> Button: <input type="button" name="bt1" value="THIS IS A BUTTON"> </p> <p> <input type="image" src="../resources/img/1.jpeg" width="200"></input> </p><!-- <p>--><!-- <input type="submit">--><!-- <input type="reset">--><!-- </p>--><!--dropdown box--> <p> dropdown box: <select name="state"> <option value="NSW" selected>NSW</option> <option value="QLD">QLD</option> <option value="W">W</option> </select> </p><!--text field--> <p> feedback: <textarea name="textarea" cols="50", rows="10">tell us how your feel</textarea> </p>
<!--file field--> <p> <input type="file" name="files"> <input type="button" value="upload" name="uploadButton"> </p>
<!--email--> <p> Email: <input type="email" name="email"></input> </p>
<!--URL--> <p> URL: <input type="url" name="url"></input> </p>
<!--Number--> <p> Number: <input type="number" name="number" max="100" min="0" step="1"> </p>
<!--slider--> <p> Volume: <input type="range" name="volume" min="0" max="100" step="2"> </p>
<!--search box--> <p> <input type="search" name="search"></input> </p> <p> <input type="submit"> <input type="reset"> </p></form></body>2.4.2 form applications
xxxxxxxxxx<body><!-->disabled -> you can disable a buttonfor example:<--><input type="submit" disabled><!-->checked -> you can define a default value in checkbox or radiofor example:<--> <p> Hobby: <input type="checkbox" name="hobby" value="coding" checked>coding <input type="checkbox" name="hobby" value="gaming">gaming <input type="checkbox" name="hobby" value="sing">sing </p><!-->selected -> you can define a default value in dropdown boxfor example:<--> <p> dropdown box: <select name="state"> <option value="NSW" selected>NSW</option> <option value="QLD">QLD</option> <option value="W">W</option> </select> </p><!-->readonly -> after adding readonly in the label, the label becomes readonly
hidden value -> you can define a default value, although it is invisible<--><!-->you can enhance mouse usability by using labelfor example:<--> <p> <label for="email01">Entering your email:</label> <input type="email" id="email01" name="email"> </p></body>2.4.3 Primary validation of forms
placeholder -- tips
xxxxxxxxxx<!--placeholder--><p>USR:<input type="text" name="user" placeholder="plz enter your name"></p>required -- not null
xxxxxxxxxx<!--required--><p>PWD:<input type="password" name="pwd" required></p>pattern -- regular expression
xxxxxxxxxx<!--pattern--><p>EMAIL:<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" /></p>
Comments
Post a Comment