|---------------|---------------------|--------------------------------------------------------------------------------------------------|
| HTML | Markup language ||
| HTML | Hyper Text Markup Language ||
| HTML file | Text file with markup tags ||
| HTML file | .htm/.html extension ||
| HTML file | Create an html file | Open an editor Type: <html><head><titile><body> Save it as .html Open it using a browser |
2. HTML tags & HTML elements
|---------------------|-------------------------------------------------------|-------------------------------------------------------------------------------------|
| HTML tags | mark-up HTML elements ||
| HTML tags | <element content> ||
| HTML elements | defined using HTML tags ||
| HTML documents | text files made up of HTML elements ||
| Basic HTML tags | Paragraphs | <p></p> (browsers automatically add an empty line before and after a paragraph) |
| Basic HTML tags | Headings | <h></h> |
| Basic HTML tags | Line breaks | <br/> (to enter line breaks, not to seperate paragraphs) |
| Basic HTML tags | Horizontal rule | <hr> |
| Basic HTML tags | Comments | <!-- --> |
| Basic HTML tags | HTML document | <html> |
| Basic HTML tags | document's body | <body> |
| Basic HTML tags | the document's area for header/control infomation | <head> |
| Basic HTML tags | document's title | <title> |
二、Build a Web Page
1. HTML Attributes & HTML Text Formatting
|--------------------------|---------------------------------------------------|
| HTML Attributes | provide additional information to an HTML element |
| HTML Attributes | case insensitive |
| HTML Text Formatting | **<b></b>**bold |
| HTML Text Formatting | **<strong></strong>**strong |
| HTML Text Formatting | **<bid></big>**big |
| HTML Text Formatting | **<em></em>**emphasized |
| HTML Text Formatting | **<i></i>**italic |
| HTML Text Formatting | **<small></small>**small |
| HTML Text Formatting | **<sub></sub>**subscripted |
| HTML Text Formatting | **<sup></sup>**superscripted |
| HTML Text Formatting | **<ins></ins>**inserted |
| HTML Text Formatting | **<del></del>**deleted |
|-----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| link to another document on the Web | <a href="linkpage.html">This text</a> <a href="http://www.qmul.ac.uk/">This text</a> |
| animage as a link | <a href="linkpage.html"> <img border="0" src="image.jpg" width ="65" height="38"></a> |
| Target: where to open the linked document | _blank: open in a new window or tab <a href="http://www.qmul.ac.uk/" target="_blank"></a> _self: open in the same frame as it was clicked _parent: open in the parent frame _top: open in the full body of the window framename: open in a named frame |
| name and section | <a name="top">top of the page</a> <a href="section.html"#top>Jump to the top</a> |
4. HTML Tables/Lists/Images & Colors
|-------------------------------|-----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML Tables | a table | <table> |
| HTML Tables | a table header | <th> |
| HTML Tables | table row | <tr> |
| HTML Tables | table cell | <td> |
| HTML Tables | table caption | <caption> |
| HTML Tables | table head | <thead> |
| HTML Tables | table body | <tbody> |
| HTML Tables | table footer | <tfoot> |
| HTML Tables | 其他 | Alignthe text: <td align = "left/right/center"></td> Background colour: <table border = "1" bgcolor="red"> Background image:<table border = "1" background = "bg.jpg"> |
| HTMLLists | Unordered list | <ul> <li></li> </ul> |
| HTMLLists | Ordered list | <ol> <li></li> </ol> |
| HTMLLists | Type of ordered list | <ol type = "A/a/Ⅰ/i"> |
| HTMLImages & Colors | Insert an image <img> | <img src = "image.gif" width = "144" height = "50"> |
| HTMLImages & Colors | alt attribute | define an "alternate text" for an image <img src = "me.jpg" alt = "This is me"> |
| HTMLImages & Colors | Background image | <body background="background.jpg"> |
| HTMLImages & Colors | Background color | <body bgcolor="#d0d0d0"> |
| HTMLImages & Colors | Text colour | <body bgcolor="#d0d0d0" text="yellow"> |
三、Handling User Input
1. HTML Forms and Input
|----------------|-------------------------------------------------------------------------|
| HTML Forms | select different kinds of user input |
| HTML Forms | an area that contain form elements that allow user to enter information |
| HTML Forms | <form> <input></input> </form> |
| Input | type is specified with type attribute |
2. Text Fields/Password Fields/Radio Buttons/Check Boxes/Simple dropdown box/Fieldset/Textarea/Button
|------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Text Fields | html <form action=""> <input type = "text" name="user"> </form> |
| Text Fields | name: the identifier that is sent to the server when you submit the form |
| Password Fields | html <form action=""> <input type="password" name="password"> </form> |
| Password Fields | displays asterisks or bullet points instead of characters |
| Radio Buttons | html <form> <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female </form> |
| Radio Buttons | selectone of the choices |
| Check Boxes | html <form> <input type = "checkbox" name="vehicle" value="bike"> <input type = "checkbox" name="vehicle" value="car"> </form> |
| Check Boxes | select one or more options |
| Defining <label> for button | Eachbutton should have alabel<label>: defines a label for an <input> element； allow a user to click on the label as well as the button The for attribute of the <label> tag = the id attribute of the related element |
| Defining <label> for button | > <form action="demo_form.asp"> > <label for = "male">Male</label> > <input type = "radio" name="sex" id = "male" value="male">Male > <label for = "female">Female</label> > <input type = "radio" name="sex"id = "female" value="female">Female > <input type = "submit" value="Submit"> > </form> |
| Action attribute | define the name of the file to send the content to the file defined in the action usually ++does something with the received input++ |
| Submit attribute | the content of the form is sent to another file |
| Image act as a submit button | The image type is by default a form submitting button |
| Simple dropdown box | > <form action=""> > <select name="cars"> > <option value ="volvo">Volvo</option > > <option value ="saab">Saab</option > > <option value ="audi">Audi</option > > </select> > </form> |
| Fieldset | > <fieldset> > <legend> > Health information: > </legend> > <form action=""> > Height<input type ="text" size="3"> > Weight<input type ="text" size="3"> > </form> > </fieldset> |
| Textarea | html <textarea rows="10" col="30"> The cat was in the garden </textarea> |
| Button | html <form action=""> <input type="button" value="Hello world!"> </form> |
| Difference between button and submit | <input type="button">: will not submit a form on their own------they don't do anying by default. <input type="submit">: will submit the form they are in when the user clicks on them |
| Difference between id and name | The name attribute: what is sent when the form is submitted. The id attribute: uniquely identifies any element on the page. When the form is submitted, only the selected option is sent. |
3. Form Tags
|------------------|--------------------------------|
| <form> | a form for user input |
| <input> | an input field |
| <textarea> | a text-area |
| <label> | a label to a control |
| <fieldset> | a fieldset |
| <legend> | a caption for a fieldset |
| <select> | a selectable list |
| <optgroup> | an option group |
| <option> | an option in the drop-down box |
| <button> | a push button |
思维导图
Exercise
1. What is the difference between the three text boxes？
The values of them are different.
2. What happens if you change this tag <body> to <body bgcolor=ccffcc>?
3. What happens if you add this tag after the body tag: <front face=arial>?
4. What happens if you delete a <br> tag?
5. What happens if you add this before the first text box:<h2>Please add information</h2>
6. What happens if you do NOT include the closing tag i.e. </h2>?
1. Does the page display what is written in the value attribute (e.g. pz) or what is written after the tag (e.g. pizza)?
No.
2. Can a user select more than one food type?
No. Checkbox can.
3. Change the name of the last radio button (i.e. the one for the salad), from name=food to name=morefood. Can the user now select more than one food type (e.g. salad and pasta)?
No.
1. Does the list show the word bungalow or bung?
bung.
2. In Internet Explorer (IE), add a space followed by the word selected after bungalow. Save the file and refresh the browser. What has changed?
bung is selected by default.
1. Write the difference between the three textAreas? 1) 2) 3)
The name and default content
2. How would you correct the third textArea?
3. There is no value attribute -- what is the value of a textArea?
The text content of it.
Lab2------html
Questions
1. What is HTML? How does it relate to HTTP?
· HTML is a mark-up language, which is used to build a web page and handle user input.
· HTTP is the application protocol which is used to request and response on the browser and client.
· HTML build the web page, and HTTP send and receive the web page.
2. In HTML, you can have input of type submit, together with an associated button (like the Submit button in Error! Reference source not found.). What is supposed to happen when you click that button?
Button will not submit a form on their own, they don't do anything by default. However, submit buttons will submit the form they are in when the user clicks on them
|
