Preparing for HTML
<a> Anchor Element The <a> anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. The href determines the location the anchor element points to
<!-- Linking a text --> <a href="codecademy.com">Visit this site</a> <!-- Linking an image --> <a href="codecademy.com"> <img src="logo.jpg">Click this image</a>
Comments In HTML, comments can be added between an opening <!-- and closing -->. Content inside of comments will not be rendered by browsers, and are usually used to describe a part of code or provide other details. Comments can span single or multiple lines. Comments begin with <!-- and end with -->. Any characters in between will be ignored by your browser.
<!-- Main site content --> <div>Content</div> <!-- Comments can be multiple lines long. -->
how to set up an HTML file. let web browsers know that we are using HTML by starting our document with a document type declaration. This declaration is an instruction, and it must be the first line of code in your HTML documentIt tells the browser what type of document to expect, along with what version of HTML is being used in the document In the future, however, a new standard will override HTML5. To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents. Lastly, HTML code is always saved in a file with an .html extension.
<!DOCTYPE html>
Page Titles A browser's tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>. title is the page title that will appear obove the search bar in the wesites tag that is the page title
<!DOCTYPE html> <html> <head> <title>My Coding Journal</title> </head> </html>
The <html> tag The <!DOCTYPE html> declaration provides the browser with two pieces of information (the type of document and the HTML version to expect), but it doesn't actually add any HTML structure or content. To create HTML structure and content, we must add opening and closing <html> tags after declaring <!DOCTYPE html>:
<!DOCTYPE html> <html> </html>
Opening Links in a New Window Have you ever clicked on a link and observed the resulting web page open in a new browser window? If so, you can thank the <a> element's target attribute. The target attribute specifies how a link should open. <target> Target Attribute The target attribute on an <a> anchor element specifies where a hyperlink should be opened. A target value of "_blank" will tell the browser to open the hyperlink in a new tab in modern browsers, or in a new window in older browsers or if the browser has had settings changed to open hyperlinks in a new window. The target="_blank" attribute, when used in modern browsers, will open new websites in a new tab.
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>
Linking at Will it's possible to turn images into links by simply wrapping the <img> element with an <a> element.
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>
Linking to Other Web Pages You can add links to a web page by adding an anchor element <a> and including the text of the link in between the opening and closing tags.
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>
Indentation HTML code should be formatted such that the indentation level of text increases once for each level of nesting. It is a common convention to use two or four space per level of nesting. W3C, is responsible for maintaining the style standards of HTML. At the time of writing, the W3C recommends 2 spaces of indentation when writing HTML code. Although your code will work without exactly two spaces, this standard is followed by the majority of professional web developers. Indentation is used to easily visualize which elements are nested within other elements.
<body> <p>Paragraph 1</p> <div> <p>Paragraph 2</p> </div> </body>
The Head Now, let's also give the browser some information about the page itself. We can do this by adding a <head> element. Remember the <body> tag? The <head> element is part of this HTML metaphor. It goes above our <body> element. The <head> element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. Unlike the information inside of the <body> tag, the metadata in the head is information about the page itself. You'll see an example of this in the next exercise. The opening and closing head tags typically appear as the first item after your first HTML tag:
<head> </head>
Linking to Same Page When users visit our site, we want them to be able to click a link and have the page automatically scroll to a specific section. In order to link to a target on the same page, we must give the target an id, In this example, the <p> element is assigned an id of "top" and the <h1> element is assigned "bottom." An id can be added to most elements on a webpage. An id should be descriptive to make it easier to remember the purpose of a link. The target link is a string containing the # character and the target element's id.
<p id="top">This is the top of the page!</p> <h1 id="bottom">This is the bottom! </h1> <ol> <li><a href="#top">Top</a></li> <li><a href="#bottom">Bottom</a></li> </ol> <ul> <li><a href="#introduction"> Introduction </a></li> <li><a href="#habitat"> Habitat</a></li> <li><a href="#media"> Media </a></li> </ul>
Whitespace Whitespace, such as line breaks, added to an HTML document between block-level elements will generally be ignored by the browser and are not added to increase spacing on the rendered HTML page. Rather, whitespace is added for organization and easier reading of the HTML document itself. Programmers use two tools to visualize the relationship between elements: whitespace and indentation. Both tools take advantage of the fact that the position of elements in a browser is independent of the amount of whitespace or indentation in the index.html file. For example, if you wanted to increase the space between two paragraphs on your web page, you would not be able to accomplish this by adding space between the paragraph elements in the index.html file. The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow.
<p>Test paragraph</p> <!-- The whitespace created by this line, and above/below this line is ignored by the browser--> <p>Another test paragraph, this will sit right under the first paragraph, no extra space between.</p> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> </body> A browser renders both examples the same way: Paragraph 1 Paragraph 2
Linking to Relative Page When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored. As the size of the projects you create grows, you may use additional folders within the main project folder to organize your code.HTML files are often stored in the same folder, A relative path is a filename that shows the path to a local file (a file on the same website, such as ./index.html) versus an absolute path (a full URL, like https://www.codecademy.com/learn/learn-html which is stored in a different folder). The ./ in ./index.html tells the browser to look for the file in the current folder.
project-folder/ |—— about.html |—— contact.html |—— index.html <a href="./contact.html">Contact</a> <a href="./index.html"> Brown Bear</a>