HTML Intro 2
1. Starting an HTML file
<!DOCTYPE html>
- In the very beginning of an HTML file, you start with the code:
<!DOCTYPE html>
- This specifies to the browser that this file is an html document of a specific version - html5
- This makes sure the browser correctly and efficiently interprets the codes in this document
<html></html>
- After
<!DOCTYPE html>, you write the<html>tag to specify that whatever codes you write inside are html codes:<html> </html>
- Everything else you write in the html file goes inside the opening and closing tags of the
<html>element- This makes sure the browser correctly interprets all the codes
2. The <Head> Element
<head></head>
- The
<head>element comes before the<body>element- The
<head>element contains the metadata of the webpage- metadata is information about the page that is not directly displayed on the webpage
<title></title>
- the
<title>tag specifies the title of the webpage - this is displayed on the title bar of the browser (or the tab of the browser)
3. HyperLinks
Anchor
<a></a>
- The anchor
<a>tag provides a link to another webpage- Attributes of
<a>:
>href- the URL of the webpage the link leads to
>target- setting value to"_blank"will open the link in a new window(or in a new tab) instead of going to the webpage within the current window
Absolute vs. Relative Path
- Absolute Path - the full URL of a webpage
> used for files/webpage stored in a different folder/directory- Relative Path - a file name that shows the path to a local file
> used for files in the same folder/directory as the current webpage
>"./"tells the browser to look for the file in the current folder
> ex)<a href="./index.html" target="_blank">Index Page</a>
Image as a link
- In HTML, you can use any element as a link by wrapping that element inside the anchor element
- for example, you can use an image as a link to another webpage by wrapping the
<img>element inside the<a>element:
> ex)<a href="https://wikipedia.org" target="_blank"><img src="./image.png" alt="the image"></a>
Link as a List Item
- You can embed the anchor element in the
<ul>or<ol>elements to use the links as a list item
> ex)<ul> <li><a href="#intro">Intro</a></li> <li><a href="#middle">Middle</a></li> <li><a href="#closing">Closing</a></li> </ul>
- For list items, it is important to note that you wrap the
<a>element inside the<li>tags, instead of wrapping the list item inside the anchor tags.
> this is because for<ul>and<ol>,<li>is the only direct child element that can be used.
- Linking (jumping) to Different Portions of the Same Page
In order to have a link scroll to a different section of the current page when clicked on, assign
idattribute to this 'target section' element
- In the
hrefof the<a>element, set thehrefvalue as the string with the'#'character and the target'sid
> ex)<div id="top"><p>This is the top of the page</p></div> <a href="#top">Top</a>
4. Making Code Easier to Read
Developers use whitespace and indentation as tools to visualize the relationship between elements and make the structure of the codes easier to read
Whitespace
- You can make use of whitespace to put each element on its own line
> ex)<div><h1>Intro</h><p>Hello</p></div>vs.
<div> <h1>Intro</h1> <p>Hello</p> </div>
Indentation
- Indentation is used to easily visualize which elements are nested in which elements
5. Comments within HTML file
You can write comments in the html file that the browser won't interpret as codes and thus ignored. You can use comments:
- As a reference to help you (and others) understand the code
- As a means to experiment with codes - you can comment out certain lines of code and write some new lines in their place to experiment to see how the codes run without having to delete the original lines of code
Comments in HTML start with
<!--and end with-->
- ex)
<!-- This is a comment that is ignored by the browser and will not be displayed -->
