Appearance
Lesson 1
Basic HTML
HTML Tags
Hypertext Markup Language (HTML) is a set of special instructions that web browsers (and other applications that understand HTML) understand. Each instruction provides information to the browser so that it can graphically render a web page the way the author intended
Each instruction is comprised of a Markup element or tag. Tags are surrounded with pointy brackets <>. The instruction is between the brackets
Example:
<h2>is an instruction to the browser to create a Level 2 Header element
Most tags require an ending part to let the browser know that is the end of this instruction
Example:
<h2></h2>The ending part is the same as the beginning part, but includes a forward slash
/
The space between the start and end parts is where the display text goes. This text will be formatted according to the tag and displayed in the browser
Example:
<h2>This text is formatted as an Level 2 Header</h2>Below is what how it will appear in a browser:
This text is formatted as an Level 2 Header
It is displayed in the browser larger that standard text and without the tags
Standard HTML Page Tags
There is a set of HTML tags that need to be in each page. The browser needs these tags to understand how to render the page
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><HTML> - The <html> </html> section defined the start of all of the HTML content
<HEAD> - The <head> </head> section contains meta data that helps the browser understand the page elements
<BODY> - The <body> </body> section contains all of the viewable content of the page
You will be working exclusively in this section in CS-102
The Browser
Modern browsers understand HTML and CSS (and may other web programming standards) and can convert HTML tags into formatted text, images, videos, and more
HTML is a standard set of instructions, managed by the (World Wide Web (W3) Consortium)[https://www.w3.org/]. This is an international groups of technology, governmental, and commercial organizations that define how the web works. Because of their work, we can choose any modern web browser to view almost any website without problems
Browser Defaults
While each modern browser follows the W3 HTML and CSS standards, they are still free to decide the specific format of many HTML instructions. So, while all modern browsers knows what to do with an <h2> tag, the actual size, color, and other simple formatting options may be a little different
When a web page does not provide any styling instructions (in the form of a .css file), the viewer will see all the the information renders the way the browser chooses. Fortunately, web page designers can include a .css file to override the browser default, and make the page look more like the designer chooses
Common HTML Tags
HTML and CSS References
A great reference for all the HTML standards can be found at (W3Schools.com/html)[https://www.w3schools.com/html]
They also have a full CSS standards can be found at (W3Schools.com/css)[https://www.w3schools.com/css]
Refer to booth as needed during our class to get help and discover options
Headings
Heading are similar to section title/subtitle in documents. They are text of different size used to separate and associate parts of a document. Heading tags are used to help the viewer understand the subject of the information presented below it
The Heading a few lines above is an
<h3>Heading</h3>HTML instruction in the browser you are using to view this page. It lets the view know what he information below is covering
HTML has six (6) headers. Header 1 (largest) to Header 6 (smallest)
| HTML | Browser Render |
|---|---|
<h1>Heading 1</h1> | Heading 1 |
<h2>Heading 2</h2> | Heading 2 |
<h3>Heading 3</h3> | Heading 3 |
<h4>Heading 4</h4> | Heading 4 |
<h5>Heading 5</h5> | Heading 5 |
<h6>Heading 6</h6> | Heading 6 |
Recall that the formatting of the Browser Render column is decided by the browser you are using to view this page
Paragraph
The paragraph tag is used contain a block of text. This is typically the details for the viewer to read and understand
Example:
<p>This is a long block of text with details and such for the viewer to read and understand</p>Below is what how it will appear in a browser:
This is a long block of text with details and such for the viewer to read and understand
Horizontal Rule
The <hr> tag is used to draw a line across the page, to visually separate sections
Example:
<hr>Below is what how it will appear in a browser (the default is usually a faint line):
Note that
<hr>is one of a few tags that do not have an ending part