CodeHS.com: Introduction to HTML (2.1 - )
How does HTML mark up the text of a web page?
*HTML tags* mark up the text of a document in order to tell the browser how the text should be displayed.
What do HTML tags look like?
- They're enclosed in angle brackets: <h1> - Not displayed on the resulting web page. - Inform the browser about how certain text should be displayed.
Important Takeaways
- tags can go inside other tags - we use indenting to show the structure of the tags (to show which tags are inside other tags) - the structure of an HTML document is a tree
Understanding HTML tags
- tags start and end with angle brackets: < > - the name of the tag goes between the angle brackets (so the name of <h1> is h1) - you need an opening tag and a closing tag... the only difference between the two is that the closing tag has a backslash ( / ) before the tag name - in between the opening and closing tag is the content affected by the tag (ex: <h1>hello</h1> ... "hello" will be displayed)
<b>
<b> = bold text
<br>
<br> = line break - no closing tag - creates a new line / blank line
<hr>
<hr> = horizontal rule - no closing tag - creates a horizontal line on the screen
<i>
<i> = italicized text
<!DOCTYPE html>
Doctype tells the browser which version of HTML we are using. This tag says we are using HTML 5. (NOT an HTML tag, just a comment at the top of the file)
example of line breaks
HTML: <p> P. Sherman<br> 42 Wallaby Way<br> Sydney, Australia <br> </p> Result: P. Sherman 42 Wallaby Way Sydney, Australia
*What does HTML stand for?
Hyper Text Markup Language
What does HTML stand for?
Hyper Text Markup Language
When we have tags inside of other tags, we...
INDENT... For example: <!DOCTYPterm-11E html> <html> <head> <title></title> <head> <body> </body> </html>
<p>
Tag: <p> = paragraph of text HTML: <p> Paragraph 1 </p> <p> Paragraph 2 </p> Result: Paragraph 1 Paragraph 2 --> There is an automatic new line after the paragraph tag.
<body>
The <body> tag is where the actual content of the document goes (text, images, etc.) This is where most of your HTML tags will go. Example: <body> </body>
<head>
The <head> tag contains important information about the document: metadata (data about data) We can include a few special tags here....
<html>
The <html> tag says that everything in between these two tags in our html page. It is the container for all other HTML tags.
<title>
The <title> tag defines the title of the webpage. This is displayed in the top of the web browser. Example: <title>My First Page</title>
*Which of the following is an example of metadata about a webpage? a) the title of the webpage b) the body of the webpage c) an <h1> tag on the webpage d) all of the above
a) the title of the webpage
Important note about line breaks...
all white space in an HTML document gets displayed as single spaces in the resulting webpage. just hitting enter will not create a line break, you need to add one.
Headings
as the numbers get bigger, the heading gets smaller. <h1> is the largest and <h6> is the smallest heading
*Which of the following is a valid HTML tag? a) h1 b) <> c) <h1> d) >h1<
c) <h1>
*What is the function of the <br> tag?
create a line break on the resulting webpage
What is metadata?
data that describes data (data about the actual page, not the page itself)
What is markup language?
lets you annotate text to define how it should be displayed
Putting html tags inside of other tags is also called...
nesting tags
What is HyperText?
text displayed on a computer that has links to other hypertext documents (hyperlinks)
