HTML is the skeleton that gives every webpage structure.
Today's uses; add paragraphs, headings, images and links to a webpage.
add hello world
<!DOCTYPE html>
<html>
<strong>Hello World.</strong> in text editor; in the website "Hello World"
</html>// = sign for comments
//<strong></strong> tags make "hello world" bold
HyperText Markup Language. Hypertext means "text with links in it."
A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.
a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).
b. Always put <html> on the next line. This starts the HTML document.
c. Always put </html> on the last line. This ends the HTML document.
- Things inside
<>s are called tags.
- Tags nearly always come in pairs: an opening tag and a closing tag.
- Example of opening tag:
<html>
- Example of closing tag:
</html>
You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also nest, so you should close them in the right order: the most recently opened tag should be the first one closed, like in the example below.
<first tag><second tag>Some text!</second tag></first tag>
<!DOCTYPE html>
<html>
hello world
</html>
There are always two parts to the file: the head and body. Let's focus on the head.
a. It has an opening and a closing tag.
b. The head includes important information about the webpage, such as its title.
c. The title is the words we see in the tab (for example, the title of this page is "Introduction to HTML"). // this blog does not contain the title, when you do it yourself you will see it
Notice we have both title tags now, but we need <body> tags. The content in the body is what will be visible on the actual page. The body goes inside the html tags, but not inside the head tags, like this:
<html>
<head></head>
<body></body>
</html>
There are six heading sizes, where <h1> is the boss and <h6> is puny!
<h1> - The CEO<h2> - VP of Fancy Towne<h3> - Director of Some Stuff<h4> - Middle management<h5> - Lowly assistant<h6> - Gets coffee for everyone else
Image tag
This tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using src. It's also different because this tag self-closes: it doesn't have a separate tag to close it. Note the / in the tag to close it: <img src="url" />.
images that link to a website
The <a> tag is the one used to make hyperlinks (or just links) on webpages. These are the words or images you click to go to a new page!
Just like <img>, <a> has an attribute that tells the link where to go. Instead of src, <a>uses href, like so:
<a href="http://www.codecademy.com">Learn to code!</a>
src stands for "source." It tells the <img>link where the picture comes from!
href stands for "hypertext reference." Remember when we said that hypertext (that is, links) is text you can click on? Well, hreftells that link where to go! The text after hrefis the web address, and the text between <a>and </a> is the text you click on.
