Intro to HTML
- Stands for Hyper-Text Markup Language.
- Every HTML file is one web page.
- Invented by Sir Tim Berners-Lee
- Based on SGML
- Standard language used for creating web pages.
- Composed of tags
- HTML is for structuring content. It does not perform complex computations.
What Is It?
HTML is a coding language composed of various types of tags, also known as elements. These are what are used to build web pages.
- HTML is used to build web pages by using tags.
- Web browsers "read" HTML and render it as pretty visual elements for humans.
Standard Page Structure
<!DOCTYPE html> <html> <head> <title>My House</title> </head> <body> <p>My house is a very very very fine house, with two cats in the yard.</p> <p>Life used to be <strong>so hard</strong>; now everything is easy cause of you.</p> </body> </html>
Lab: Create a Web Page
That's enough theory! Let's build something!
- Open up VSCode and create a file named
- Type out your page structure following the example on the "Standard Page Structure" slide
Or use emmet abbreviations by typing an exclamation point
!and hitting Tab
- Add an
h1tag in the body of your document, and some text inside the
open index.htmlinto your terminal if you're on a Mac
- or on Windows, use
- or enter
pwdand copy and paste the directory path into your browser (chrome), then click on the
- or drag your html file directly into your browser window
- or on Windows, use
Attributes further define HTML elements and their purpose. For example, an image tag may have the following attributes:
<img src="/images/cat-pic.jpg" title="Cat Picture" alt="Picture of a fuzzy cat">
srcdefines where the image file is located.
altis alternative text to be displayed if the image cannot be.
- Attributes are not always required. However in the example above, a source is needed for the image to be displayed.
- Others include
style(for inline CSS),
title(for hover-over tooltips),
- Attribute names should always be lowercase
Lab: Adding Attributes
Let's add a few attributes to the
h1 in the HTML file we just created.
- Give your element an
- Change the color of your text using the
styleattribute and setting it to a key:value pair
- Add an image to your page
Style vs Layout vs Semantics
This war has raged inside HTML since the beginning of the web.
Some tags exclusively describe how it's contents should be displayed (ex.
<b>), where as some describe it's contents (ex.
<strong>). Web content isn't just about appearence. It matters how it is intepreted.
- Semantics are all about meaning - what is the purpose?
- Not all HTML elements convey meaning - not all HTML elements are semantic (e.g.
- Imagine a blind person using a screen reader - how might they understand the difference between a
- Not all elements style content, and not all elements define structure or layout.
- Tables are comprised 4 elements:
- Tables are a way of structuring data into rows and columns.
Example Table structure:
<h1>Grocery List</h1> <table> <tr> <th>Fruit</th> <th>Grains</th> <th>Dairy</th> </tr> <tr> <td>Apples</td> <td>White Rice</td> <td>Milk</td> </tr> <tr> <td>Bananas</td> <td>Oatmeal</td> <td>Yogurt</td> </tr> </table>
- Two main types of HTML lists: ordered and unordered.
<ul>describes a unordered list
- this list
- is unordered
<ol>describes an ordered list.
- this list
- is ordered
<ul> <li>Pizza</li> <li>Pasta</li> <li>Bread</li> </ul>