HTML 5 Basics
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. How do we do this?
In order to link to a target on the same page, we must give the target an id, like this: <p id="top"> This is the top of the page! </p> <h1 id="bottom">This is the bottom! </h1> 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. <ol> <li><a href="#top">Top</a></li> <li><a href="#bottom">Bottom</a></li> </ol>
HTML elements can be _______ inside other elements. The enclosed element is the child of the enclosing parent element.
Nested
If you want to add blocks of text in HTML, you can use what 3 things? Define them each.
Paragraph, div or span Paragraphs (<p>) simply contain a block of plain text. <div>s divide blocks of code. <span>s divide inline text, or text that is on the same line as other text.
Things inside <>s are called?
Tags
In an HTML file, what information does the body contain?
The body is where you put your content, such as text, images, and links. The content in the body is what will be visible on the actual page.
There are always two parts to an HTML file:
The head <head></head> and the body
In an HTML file, what information does the head contain?
The head contains information about your HTML file, like its title. The title is what we see in the browser's title bar or page tab. 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.
Define <h1>
This is a Heading Tag, used to give paragraphs headings.
Define inline CSS.
This simply means we can do some styling in our HTML file without worrying about a separate CSS file!
What is a comment and write the code for it.
You can include little notes in your HTML code that the browser won't display. These little notes in the code helps you remember why you did certain things. <!-- -->
What are the 6 heading sizes for HTML?
h1, h2, h3, h4, h5, h6
1. Write the code to create a link to an external website. 2. What is the "target" attribute? 2. What does the "a" element stand for?
1. <a href="https://www.codecademy.com">My Favorite Site!</a> 2. The target attribute specifies where to open the linked document <a href="" target="_blank">hello</a> _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same frame as it was clicked (this is default) 3. "a" is called an anchor tag
1. Write the code to add an image to a webpage. 2. The <img> tag has two required attributes: ___ and ___
1. <img src="url" /> This is a self closing tag 2. src and alt You will have to add the "alt" attribute while making a webpage. This specifies an alternate text for an image, if the image cannot be displayed. <img src="smiley.gif" alt="Smiley face">
For inline CSS: 1. Write the code to change the background for <p>. 2. Write the code to align the text to center, left and right- for <h1>
1. <p style="background-color: red">Hello!</p> 2. <h1 style="text-align:center">Hello!</h1>
For inline CSS: 1. write the code to change the size of a text in a paragraph. 2. write the code to change the color of a text in an <h2> heading 3. write the code to change the color and size of the text for the same tag <p> tag.
1. <p style="font-size: 12px"> 2. <h2 style="color:red"> 3. <p style="font-size: 12px; color:red"> You just add a semicolon between each value. *The style attribute can be used with many different tags and have many different values**
1. Write the code to make "help" a strong or bold text. 2. Write the code to italicize "hello" 3. How do you add a line break?
1. <strong>Help</strong> 2. <em>Hello</em> **Italicise = emphasis 3. <br /> *This is a self closing tag <p> line 1 <br /> line 2 </p>
1. Define HTML Attributes. 2. Explain the following: <p align="center">This text is centered</p>
1. Attributes modify a tag. Most attributes have a value; the value modifies the attribute. 2. The value of "center" indicates that the content within the p element should be aligned to the center.
What are the first 4 items used to set up the skeleton of a html document?
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Write the code: Add a head and title to a webpage.
<!DOCTYPE html> <html> <head> <title> My webpage </title> </head> </html>
1. Write the code to create a link to an internal webpage. Lets say that you click on a "contact" tab on a webpage. How would you write this code?
<a href="./contact.html">Contact</a> The ./ in ./contact.html tells the browser to look for the file in the current folder.
How would you make an image a link?
<a href="https://www.codecademy.com/"> <img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/> </a> The image tag essentially replaces the "text" that would go between the "a" tags.
Write the basic structure for a head, body and paragraph.
<html> <head> <title>My Webpage</title> </head> <body> <p> </p> </body> </html>
Basic set up of ordered and unordered lists.
<ol> <li></li> </ol> <ul> <li></li> </ul>
For inline CSS: Write the code to denote a font type, using <p> as your tage and "style" as your attribute.
<p style="font-family: Arial"></p> *font family values - first letter is always capitalized.
Basic set up of an unordered list, but each item in the unordered list also has an ordered list nested in it.
<ul> <li> <ol> <li></li> </ol> </li> </ul> <ul> <li>Interests <ol> <li>Taking care of Sean</li> <li>Growing spiritually</li> <li>Challenging myself on a personal and professional level</li> </ol> </li>
Write the html code to place a video on your webpage.
<video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video> In this example, the attribute (src=) is "myVideo.mp4." The source must link to a video file, not to a video on another site. The width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip. The text, Video not supported, between the opening and closing video tags will only be displayed if the browser is unable to load the video.
Tags almost always come in pairs. Which pairs?
An opening tag <> and a closing tag </>
Where are attributes placed, within an element?
Attributes are always specified in the start tag, and they appear in NAME="VALUE" pairs.
HTML documents are made up of HTML __________ and consist of ________ HTML elements.
Elements (Start tag, content, End tag) Nested
