Web Development with HTML&CSS: Publish
Your Own Website in a Week!
Heng Y.
Schoolhouse.world
27 August 2024
What we covered yesterday
▶ Basic definitions of the Internet
▶ Fundamental protocols: IP, DNS, HTTP
▶ Components of websites: HTML, CSS, JS
▶ Creating JSFiddle account and basic webpage
What we will cover today
▶ More structural tags
▶ HTML tags with attributes
▶ Types of HTML tags and nesting rules
▶ Void elements
▶ Metadata elements
▶ HTML validation
Get ready
Please re-open yesterday’s JSFiddle project. If you are unable to
find it, click your user avatar in the top right corner and click
”Your fiddles.”
Goal
Today, by following along in the lesson, you can start to make your
website if you desire to deploy it on Friday. Alternatively, you may
just follow along to make sure you catch everything.
HTML comments
▶ Sometimes you want to add a note for yourself or other
programmers that does not show on the webpage at all.
▶ This is called a comment. In HTML, comments start with
<!-- and end with -->
▶ Comments cannot be nested.
<!-- This is a comment. -->
Two types of tags
▶ By default, a tag is defined as inline or block.
▶ Block elements take up the entire width of the page.
▶ Inline elements take up only their place on the line, just like
each word of a sentence.
▶ Block elements can contain both block and inline elements.
▶ Inline elements can contain inline elements, only..
Nesting inline elements
▶ Within paragraphs, some text could be bold, italic, etc.
▶ Example of bold text:
<p>Hi, <strong>you!</strong></p>
▶ Example of italic: <p>Hi, <em>you!</em></p>
▶ We can nest these:
<p><strong><em>Hi</em></strong></p>
▶ When nesting, make sure to unravel in the correct order
▶ The <b> and <i> tags are deprecated.
More examples of inline nesting
▶ Superscripts: <p>x<sup>2</sup> = 9</p>
▶ Subscripts:
<p>C<sub>6</sub>H</sub>12</sub>H<sub>6</sub></p>
▶ Inline code:
<p>The shortcut is <kbd>Ctrl+C</kbd></p>
▶ Strike out: <p>This word is <del>deleted</del></p>
Nesting block elements
▶ Once we start creating more complex webpages, we can make
elements such as lists, which are elements that contain other
elements.
▶ ul represents ”unordered list”: a bulleted list
▶ ol represents ”ordered list”: a numbered list
▶ li represents ”list item.”
▶ List elements cannot exist outside of a list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
HTML tables
▶ <table> tag creates a table.
▶ <tr> tag creates a row.
▶ <th> tag creates a table header.
▶ <td> tag creates a cell (”table data”)
<table>
<tr>
<th>Name</th>
<th>Occupation</th>
</tr>
<tr>
<td>John Doe</td>
<td>Farmer</td>
</tr>
</table>
Adding links
▶ Links are created using the a element - it stands for ”anchor.”
▶ Links have two parts: what text is displayed on the link and
where the link leads.
▶ Therefore, the HTML tag needs to have an attribute.
▶ Attributes contain information about the tag that is not
displayed.
▶ The href attribute defines the target of the link.
▶ The content of the <a> element is the text on the link.
<p>Go to
<a href="https://google.com">Google</a></p>
Multiple attributes
▶ An element can have multiple attributes separated by spaces.
▶ The target attribute of the a element represents the tab in
which to open the link.
▶ If the target is equal to _blank, the link will open in a new
tab when clicked.
▶ The example shows a link that will open in a new tab. Notice
how the attributes are organized.
<a href="https://example.com"
target="_blank">Example</a>
Void elements
▶ Some elements do not have content, such as line break and
horizontal lines.
▶ To create a line break, use <br> or <br /> - both are valid
forms.
▶ <br></br> is not valid even though there is no content.
▶ The horizontal line is <hr> or <hr />
Images
▶ The image tag, <img> is also a void element.
▶ The URL of the image is specified in the src attribute.
▶ The alt-text of the image is specified in the alt attribute.
▶ Make sure to include alt text on all images to ensure
accessibility.
▶ Below is an example of an image tag.
<img src="https://picsum.photos/200/300.jpg"
alt="flower">
Is this element valid?
Is this element valid?
<img src="https://picsum.photos/200/300.jpg"
alt="flower">My Image</img>
Web multimedia technologies
▶ In order to place videos on webpages, the <video> element is
used.
▶ For video, the formats supported by modern browsers are
.webm and .mp4
▶ The video tag is not a void element: the content of tag is
displayed if the video cannot be displayed (i.e. if the browser
cannot play videos)
▶ The controls attribute is boolean: it doesn’t have a value
and it’s either there or it’s not.
▶ for your webpage, placeholder are available at
videoplaceholder.com
<video src="https://.../BigBuckBunny.mp4" controls>
Your browser does not support this video.
</video>
Metadata
▶ Metadata is ”data about data.”
▶ Examples of metadata include page description, keywords,
encoding, etc.
▶ Metadata tags belong only in the <head>
▶ Metadata is defined using <meta> tags.
▶ This is a void element.
<meta charset="utf-8">
Purposes of metadata
▶ The charset determines how the page is encoded. utf-8
refers to Unicode. This is important for displaying characters
in other languages.
▶ The meta tags are also used by search engines to know more
about your webpage
▶ For most meta tags, the name and content attributes are
used.
▶ The content of the tag with name="description" will be
used as the preview by search engines.
▶ The content of the tag with name="keywords" will be used
by search engines also
HTML validation
▶ You might have noticed that HTML sometimes fails silently
and still displays the correct content.
▶ However, if your website displays correctly on a device even
though there are issues with the HTML, it may be
inconsistent.
▶ It is important to check the validity of your HTML for syntax
errors.
▶ Highlighting in JSFiddle can help you.
▶ The W3C defines the standard for HTML.
▶ The W3C validator is located at validator.w3.org
Common pitfalls
▶ Incorrect nesting: <p><strong>My text</p></strong>
▶ Not closing tags: <p><strong>Hello</p>
Coding conventions
In order to maintain a consistent code style, most programmers use
some variation of these rules.
▶ All code should be lowercase: <img> rather than <IMG>
▶ Indent when nesting larger elements
▶ Use no spaces and quotes with attributes:
<a href="google.com">link</a> rather than
<a Href = google.com>link</a>
▶ Include fallbacks for images and videos (i.e. alt tag)
▶ For links, don’t use ”Click here” - use something more
descriptive.
Thank you!
Tomorrow, we will delve into CSS and how we can decorate and
style our webpage.
Please leave feedback to let me know how I’m doing!
