Scribd Logo
Upload

Welcome to Scribd!

  • HTML & Css - Lesson 2: IT Lecturerer: Ngo Dinh Cuong

    Uploaded by

    Phan Văn Tú
    28 views31 pages
    nn

    Original Title

    HTML&CSS Lesson 2.pptx

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    nn

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    28 views31 pages

    HTML & Css - Lesson 2: IT Lecturerer: Ngo Dinh Cuong

    Uploaded by

    Phan Văn Tú
    nn

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 31

    HTML & CSS -LESSON 2

    IT Lecturerer: Ngo Dinh Cuong

    HTML Editor

    HTML Ordered Lists:

    HTML Editor

    HTML Ordered Lists:


    <!DOCTYPE html> <html> <body> <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol reversed> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="100"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>

    HTML Editor

    HTML Unordered Lists

    Note: The type attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.

    HTML Editor

    HTML Unordered Lists


    <!DOCTYPE html> <html> <body> <ul type="disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul type="square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

    <ul type="circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>

    HTML Editor

    Sub-lists
    <!DOCTYPE html> <html> <body> <ol> <li>Coffee</li> <ul type="disc"> <li>Espresso</li> <li>Cappucino</li> <li>Mochachino</li> </ul> <li>Tea</li> <ol type="i"> <li>Green Tea</li> <li>Black Tea</li> <li>Yellow Tea</li> </ol> <li>Milk</li> </ol> </body> </html>

    HTML <img>

    HTML <img>
    <!DOCTYPE html> <html> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> This is some text.</p> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle"> This is some text.</p>

    <h4>Image with align="top":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="top"> This is some text.</p> </body> </html>

    HTML Table

    HTML Tables: Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
    <!DOCTYPE html> <html> <body> <table border="1"> <tr> <td>row 1, cell <td>row 1, cell </tr> <tr> <td>row 2, cell <td>row 2, cell </tr> </table> </body> </html>

    1</td> 2</td>

    1</td> 2</td>

    HTML Editor

    HTML Table Headers: Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered.
    <!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row <td>row </tr> <tr> <td>row <td>row </tr> </table> </body> </html> 1, cell 1</td> 1, cell 2</td>

    2, cell 1</td> 2, cell 2</td>

    HTML Editor

    HTML Table :
    <!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>ID</th> <th>Fullname</th> <th>Birthday</th> <th>National</th> </tr> <tr> <td>100</td> <td>David Lee</td> <td>10/05/1990</td> <td>American</td> </tr> </table> </body> </html>

    HTML Editor

    HTML Editor

    HTML Editor

    HTML Table :
    <!DOCTYPE html> <html> <body> <table border="1" align="right" bgcolor="#99CCFF" width="400px"> <tr> <th>ID</th> <th>Fullname</th> <th>Birthday</th> <th>National</th> </tr> <tr> <td>100</td> <td>David Lee</td> <td>10/05/1990</td> <td>American</td> </tr> </table> </body> </html>

    HTML Editor

    HTML Table :

    colspan: Specifies the number of columns a cell should span rowspan: Sets the number of rows a cell should span

    <table border="1"> <tr> <th>Month</th> <th>Savings</th> <th>Savings for holiday!</th> </tr> <tr> <td>January</td> <td>$100</td> <td rowspan="3">$50</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td colspan="2">Sum: $180</td> </tr> </table>

    HTML Editor

    HTML Forms: HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
    <!DOCTYPE html> <html> <body> <form> . input elements . </form> </body> </html>

    HTML Editor

    Text Fields: <input type="text"> defines a one-line input field that a user can enter text into:
    <!DOCTYPE html> <html> <body> <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> </html>

    Password Field: <input type="password"> defines a password field:


    <!DOCTYPE html> <html> <body> <form> Password: <input type="password" name="pwd"> </form> </html>

    HTML <input>

    HTML <input>

    HTML <input>

    HTML <input>

    HTML Editor

    Radio Buttons: <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
    <!DOCTYPE html> <html> <body> <form> <input type="radio" name="sex" value="male">Male</br> <input type="radio" name="sex" value="female">Female </form> </html>

    Checkboxes: <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
    <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>

    HTML Editor

    Submit Button: <input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
    <!DOCTYPE html> <html> <body> <form name=frm_login" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> </html>

    HTML <select>

    Select tag: Create a drop-down list with four options:


    <!DOCTYPE <html> <body> <form> <select> <option <option <option <option </select> </form> </html> html>

    value="volvo">Volvo</option> value="saab">Saab</option> value="mercedes">Mercedes</option> value="audi">Audi</option>

    HTML Editor

    HTML <select>
    <!DOCTYPE html> <html> <body> <select disabled size="5"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</opt ion> <option value="audi">Audi</option> </select> </body> </html>

    HTML Editor

    Textarea tag:
    <!DOCTYPE html> <html> <body> <form> <textarea rows="4" cols="50">

    Dont write your name on sand, waves will wash it way Dont write your name in sky, wind may blow it away Write your name in hearts of people you come in touch with. Thats where it will stay
    </textarea> </form> </html>

    HTML <textarea>

    HTML <textarea>
    <!DOCTYPE html> <html> <body> Who are you? <textarea rows="4" cols="50" maxlength="50" placeholder="Describe yourself here..."> </textarea> </body> </html>

    Try It Yourself

    Try It Yourself
    Draw a table:

    You might also like