Skip to content

HTML

Jump to bottom
herougo edited this page Nov 16, 2023 · 11 revisions

HTML (HyperText Markup Language)

Sources:

Text Formatting

<!DOCTYPE html>
<html>
    <head>
        <title>Text that appears at the top in the tab</title>
    </head>
    <body>
        <h1>Largest heading</h1>
        <h2>2nd largest heading</h2>
        <h6>Smallest heading possible (h7 and above don't exist)</h6>
        <hr /> <!-- This is a comment on the same line as the horizontal rule (line) tag -->
        <p> This is one line of a paragraph</p>
        <p> This is another line of a paragraph <br/> Yet another line of a paragraph. </p>
        <p> <b>Bolded Text</b> </p>
        <p> <i>Italicized Text</i> </p>
        <p> <u>Underlined Text</u> </p>
        <p> <strike>Crossed Out Text</strike> </p>
        <p> superscript x<sup>2</sup> </p>
        <p> subscript x<sub>2</sub> </p>
        <p> <pre>Whitespace inside pre tags are          preserved</pre> </p>
    </body>
</html>

Images, Links, Tables, and Lists

File Structure

  • index.html
  • chandler.html
  • friends.jpg
<!DOCTYPE html>
<html>
    <head>
        <title>Text that appears at the top in the tab</title>
    </head>
    <body>
        <img src="friends.jpg" alt="Text displayed when the image fails to load" style="width:500px;height:250px;"/>
        <p><a href="https://google.com">Click me to go to google (I'm a link)</a></p>
        <p><a href="chandler.html">Click me to go to the Chandler page!</a></p>
        <p><a href="chandler.html#career">Click me to go to the Chandler page and scroll to the element with the id career!</a></p>

        <!-- iframes are used to render webpages inside other webpages -->
        <iframe src="chandler.html" width="500px" height="500px" />
        
        <!--
        Table without border
         - to add a border, add the border="1" attribute to table
         - cellspacing (distance between cells because the default is 2)
         - cellpadding (padding between cell and its text)
        -->
        <table cellspacing="0" cellpadding="10">
            <caption>caption of table displayed at the top</caption>
            <tr>
                <th rowspan="5">"Row heading" spanning 4 rows (note that rowspan is 1 more)</th>
            </tr>
            <tr>
                <th colspan="2">Heading spanning 2 columns</th>
            </tr>
            <tr>
                <th>1st Column Heading</th>
                <th>2nd Column Heading</th>
            </tr>
            <tr>
                <td>1st row (column 1) entry</td>
                <td>1st row (column 2) entry</td>
            </tr>
            <tr>
                <td>2nd row (column 1) entry</td>
                <td>2nd row (column 2) entry</td>
            </tr>
        </table>

        <p>Unordered List</p>
        <ul> <!-- Attribute known as "type" (default disc) can be "circle", "square", "none", etc -->
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>

        <p>Ordered List</p>
        <!-- Attribute known as "type" (default "1") can be "1", "A" (ABC), "a", "I" (roman numerals), "i", etc -->
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <ul>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
                <li>Item 2.3</li>
            </ul>
            <li>Item 3</li>
        </ol>
    </body>
</html>

Omitted

  • definition lists (not used much)

Forms

<!DOCTYPE html>
<html>
    <head>
        <title>Text that appears at the top in the tab</title>
    </head>
    <body>
        <form>
            <!-- size of 3 (3 what?), can't type more than 5 characters -->
            Username: <input type="text" name="uname" size="3" maxlength="5"/>
            Password: <input type="password" name="upass"/>
            Gender: <input type="radio" name="gender" value="male" checked/>Male
                    <input type="radio" name="gender" value="female" checked/>Female <br/>
            Courses: <input type="checkbox" name="course1" value="HTML" checked/>HTML
                     <input type="checkbox" name="course2" value="CSS" checked/>CSS
            Age Dropdown: <select name="age">
                <option>10-20</option>
                <option>20-30</option>
                <option>30-40</option>
            </select> </br>
            Comment Rich Text Box: <textarea name="comment" rows="3" cols="10"></textarea>

            <!-- Submit button that does nothing right now -->
            <input type="submit" value="Submit"/>
            <!-- Reset button that automatically works -->
            <input type="reset" value="Reset"/>
            <input type="button" value="Text in the button"/>
        </form>
    </body>
</html>

Clone this wiki locally