html - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •another self-closing...
TRANSCRIPT
![Page 1: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/1.jpg)
HTML
![Page 2: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/2.jpg)
HTML
• HTML (Hypertext Markup Language) is a fundamental component of every website.
• HTML is a language, but it is not a programming language. It lacks concepts of variables, logic, functions, and the like.
• Rather, it is a markup language, using angle-bracket enclosed tags to semantically define the structure of a web page, causing the plain text inside of sets of tags to be interpreted by web browsers in different ways.
![Page 3: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/3.jpg)
HTML
<html>
<head>
<title>
Hello, world
</title>
</head>
<body>
World, hello
</body>
</html>
![Page 4: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/4.jpg)
HTML
<html>
<head>
<title>
Hello, world
</title>
</head>
<body>
World, hello
</body>
</html>
![Page 5: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/5.jpg)
HTML
<html>
<head>
<title>
Hello, world
</title>
</head>
<body>
World, hello
</body>
</html>
![Page 6: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/6.jpg)
HTML
<html>
<head>
<title>
Hello, world
</title>
</head>
<body>
World, hello
</body>
</html>
![Page 7: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/7.jpg)
HTML
<html>
<head>
<title>
Hello, world
</title>
</head>
<body>
World, hello
</body>
</html>
![Page 8: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/8.jpg)
HTML
<html><head><title>Hello, world</title></head><body>World, hello</body></html>
![Page 9: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/9.jpg)
HTML
• Notice how the markup allows us to convey extra information about the text we’ve written.
• There are over 100 HTML tags, and lots of great resources online to find them. We won’t cover them all here.
• Another interesting way to learn about HTML tags is to view the source of a website you frequent by opening up your browser of choice’s developer tools.
![Page 10: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/10.jpg)
HTML
• Common HTML tags
• <b>, </b>• Text between these tags will be rendered in boldface by the browser.
• <i>, </i>• Text between these tags will be rendered in italics by the browser.
• <u>, </u>• Text between these tags will be rendered underlined by the browser.
![Page 11: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/11.jpg)
HTML
• Common HTML tags
• <p>, </p>• Text between these tags will be rendered as a paragraph by the browser,
with space above and below.
• <hX>, </hX>• X = 1, 2, 3, 4, 5, or 6
• Text between these tags will be rendered as an X-level section header.
![Page 12: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/12.jpg)
HTML
• Common HTML tags
• <ul>, </ul>• Demarcate the beginning and end of an unordered (bulleted) list.
• <ol>, </ol>• Demarcate the beginning and end of an ordered (numbered) list.
• <li>, </li>• Demarcate list items with an ordered or unordered list.
![Page 13: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/13.jpg)
HTML
• Common HTML tags
• <table>, </table>• Demarcate the beginning and end of a table definition.
• <tr>, </tr>• Demarcate the beginning and end of a row within a table.
• <td>, </td>• Demarcate the beginning and end of a column within a row within a table.
![Page 14: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/14.jpg)
HTML
• Common HTML tags
• <form>, </form>• Demarcate the beginning and end of an HTML form.
• <div>, </div>• Demarcate the beginning and end of an arbitrary HTML page division.
• <input name=X type=Y />• Define a field within an HTML form. X is a unique identifier for that field, Y is
what type of data it accepts.
![Page 15: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/15.jpg)
HTML
• Common HTML tags
• <form>, </form>• Demarcate the beginning and end of an HTML form.
• <div>, </div>• Demarcate the beginning and end of an arbitrary HTML page division.
• <input name=X type=Y />• Define a field within an HTML form. X is a unique identifier for that field, Y is
what type of data it accepts.
![Page 16: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/16.jpg)
HTML
• Common HTML tags
• <a href=X>, </a>• Creates a hyperlink to web page X, with the text between the tags rendered
and functional as the link text.
• <img src=X ... />• Another self-closing tag for displaying an image located at X, with possible
additional attributes (such as specifying width and height).
• <!DOCTYPE html>• Specific to HTML5, lets the browser know that’s the standard you’re using.
![Page 17: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/17.jpg)
HTML
• Common HTML tags
• <!--, -->• Demarcate the beginning and end of an HTML comment.
• Beyond the tags as explained here, each can also have multiple attributes that slightly modify the tag.• For example, you can usually add an id=X attribute, to uniquely
identify a tag within an overall page.
![Page 18: HTML - cdn.cs50.netcdn.cs50.net/2015/fall/sections/8/html/html.pdf · • •Another self-closing tag for displaying an image located at X, with possible](https://reader034.vdocuments.us/reader034/viewer/2022042801/5a78e2f67f8b9a21538ece25/html5/thumbnails/18.jpg)
HTML
• It is important that the HTML you write be well-formed. Every tag you open should be closed (unless it is a self-closing tag), and tags should be closed in reverse order of when they were opened.
• Unlike C, your HTML will not necessarily fail with syntax errors if not well-formed, so it’s up to you to be vigilant.
• Because it can be an arduous task to investigate this, be sure to use online HTML validators to help!