Introduction to HTML (Code Academy)
In what way is HTML organized?
HTML is organized as a collection of family tree relationships.
What does HTML stand for?
HTML stands for Hyper Text Markup Language
The relationship between elements and their ancestor and descendant elements is known as _________________
Hierarchy
What is the order of heading elements from largest to smallest?
1. <h1> — used for main headings. All other smaller headings are used for subheadings. 2. <h2> 3. <h3> 4. <h4> 5. <h5> 6. <h6>
Attributes are made up of what two parts?
1. The name of the attribute. 2. The value of the attribute
The following example code uses a headline intended to capture a reader's attention:
<h1>BREAKING NEWS</h1>
So what exactly is HTML?
HTML gives structure to the content appearing on a website, such as images, text, or videos.
What is HTML composed of?
It is composed of elements which structure the webpage and define its content.
Does the spacing between code in an HTML file affect the positioning of elements in the browser?
No, the spacing between code in an HTML file does not affect the positioning of elements in the browser.
We can use the id attribute to:
Specify different content (such as <div>s) and it is really helpful when you use an element more than once. id's have several different purposes in HTML.
The child element is said to be nested inside of ______________
The parent element.
What is the required attribute of the <img> tag?
The required attribute of the <img> tag is the src attribute.
Unlike the <img> tag, the <video> element requires ......
Unlike the <img> tag the <video> element requires an opening and a closing tag.
What should you always do when you nest elements inside of <div>'s
When you nest elements inside of <div>'s you should always add two space of indentation for better readability
If we want to expand an element's tag, we can do so using an _______________
attribute
An unordered list outlines.....
individual list items with a bullet point
Ordered lists <ol> are like unordered lists, except that each list item is...
numbered
How many different heading elements (a.k.a headings) are there in HTML?
6
Introduction to HTML complete example: <body> <h1>The Brown Bear</h1> <div id="introduction"> <h2>About Brown Bears</h2> <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p> <h3>Species</h3> <ul> <li>Arctos</li> <li>Collarus</li> <li>Horribilis</li> <li>Nelsoni (extinct)</li> </ul> <h3>Features</h3> <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p> </div> <div id="habitat"> <h2>Habitat</h2> <h3>Countries with Large Brown Bear Populations</h3> <ol> <li>Russia</li> <li>United States</li> <li>Canada</li> </ol> <h3>Countries with Small Brown Bear Populations</h3> <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p> </div> <div id="media"> <h2>Media</h2> <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/> <video src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls> Video not supported </video> </div> </body>
:)
This is how opening and closing body tags look like:
<body> </body>
The following is an example of <div> being used.
<body> <div> <h1>Why use divs?</h1> <p>Great for grouping elements!</p> </div> </body>
Once the file has a body, many different types of content - including text, images, and buttons - can be added to the body. Here is an example of this:
<body> <p>Hi.</p> </body>
If you are interested in modifying the spacing in the browser, you can use HTML's line break element:
<br>
When we add an id to a <div>, we place it in the opening tag. The following is an example of this:
<div id="intro"> <h1>Introduction</h1> </div>
What is an Opening Tag?
An opening tag is the first HTML tag used to start and HTML element. The tag type is surrounded by opening and closing angle brackets.
What are attributes?
Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling.
What is content?
Content is the information (text or other elements) that is contained between the opening and closing tags of an HTML element.
General Advice
Part of being an exceptional web developer is making your site accessible to users of all backgrounds. In order to make the Web more inclusive, we need to consider what happens when assistive technologies such as screen readers come across image tags.
<img src="#" alt="A field of yellow sunflowers" />
An example of the alt attribute being use.
What do paragraphs <p> contain?
Paragraphs <p> contain a block of plain text
The alt attribute also serves the following purposes:
1. If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute. 2. Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image's description out loud to the visually impaired user. 3. The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot "see" the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
<span> contains...
<span> contains short piece of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
What is a closing tag?
A closing tag is the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
What's a markup language?
A markup language is a computer language that defines the structure and presentation of raw text. In HTML, the computer can interpret raw text that is wrapped in HTML elements.
How can you see the HTML on a certain page on the internet?
All you need to do is to right-click on any page on the internet, choose "Inspect", and you'll see HTML in a panel of your screen
What is an HTML tag?
An HTML tag is the element name, surrounded by an opening (<) and closing (>) angle bracket.
What is an HTML element?
An HTMl element is a tag and the content between it. It is a unit of content in an HTML document formed by HTML tags and the text or media it contains.
What are headings in HTML?
Heading in HTML are similar to headings in other types of media such as newspapers. Headings are typically used to capture a reader's attention, while other times they are used to describe content, like the title of a move or an article.
What is HyperText?
HyperText is text displayed on a computer or device that provides access to other text through links, also known as "hyperlinks."
In what case should the alt attribute be left empty?
If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), then the alt attribute should be left empty
What tag would you use if you wanted to add content to your web page in the form of an image?
If you wanted to add content to your web page in the form of an image then you would use the <img> tag.
<body> <p>This paragraph is a child of the body</p> </body>
In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent. You can also see that we've added two spaces of indentation (using the space bar) for better readability.
<ol> <li>Preheat the oven to 350 degrees.</li> <li>Mix whole wheat flour, baking soda, and salt.</li> <li>Cream the butter, sugar in separate bowl.</li> <li>Add eggs and vanilla extract to bowl.</li> </ol
In this example the output will look like this: 1. Preheat the oven to 350 degrees. 2. Mix whole wheat flour, baking soda, and salt. 3. Cream the butter, sugar in separate bowl. 4. Add eggs and vanilla extract to bowl.
<body> <div> <h1>Sibling to p, but also grandchild of body</h1> <p>Sibling to h1, but also grandchild of body</p> </div> </body>
In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are at the same level, they are considered siblings and are both grandchildren of the <body> element.
<p><strong>The Nile River</strong> is the <em>longest</em> river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).</p>
In this example, the <strong> and <em> tags are used to emphasize the text to produce the following: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles). As we can see, "The Nile River" is bolded and "longest" is in italics.
<ul> <li>Limes</li> <li>Tortillas</li> <li>Chicken</li> </ul>
In this example, the list was created using the <ul> tag and all individual list items were added using <li> tags. The output will look like this: (bp) Limes (bp) Tortillas (bp) Chicken Note: I couldn't copy and paste the bullet point so I just used the abbreviation "bp" to represent it. Just use you imagination to fill it in with real bullet points.
<video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video>
In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage. After the src attribute, 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.
<div> <h1>Technology</h1> </div> <div> <p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p> </div>
In this example, there are two different <div>. The second <div> contains a <p> with <span>Self-driving cars</span>. This <span> element separates "Self-driving cars" from the rest of the text in the paragraph.
The <ul> element should not hold raw text and won't automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using what tag?
Individual list items must be added to the unordered list using the list item tag<li>.
Why is it important to understand HTML hierarchy?
It is important to understand HTML hierarchy because child elements can inherit behavior and styling from their parent element.
What is the paragraph element made up of?
It is made up of one opening tag (<p>), the content (exp. "Hello World!" text), and a closing tag (</p>)
When is it best to use a <span> element?
It's best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it's better to use a <div>.
<img src="image-location.jpg" />
Just an example of the <img> tag in use with the src attribute.
Most elements require both opening and closing tags, but the <img> tag is a ....
Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash but either way both will render properly.
Ordered lists are useful for when....
Ordered lists are useful for when you need to list different steps in a process or rank items for first to last
If you want to display text in HTML, you can use a :
Paragraph or span
What is the <div> element?
The <div> element is short for "division" and functions as a container that divides the page into sections. These sections are very useful for grouping element in your HTML together.
Later, when you begin to style websites, you will decide how you want browsers to display content within <em> and <strong> tags. Browsers, however, have built-in style sheets that will generally style these tags in the following ways:
The <em> tag will generally render as italic emphasis. The <strong> will generally render as bold emphasis.
What does the <img> tag allow you to do?
The <img> tag allows you to add an image to a web page.
What is the <li> tag used to describe?
The <li> tag is used to describe an item in a list.
The <video> tag requires a...
The <video> tag requires a src attribute with a link to the video source.
What is the alt attribute?
The alt attribute, which means alternative text, brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.
What is the body element?
The body element is one of the key HTML elements we use to build a webpage. Only content inside the opening and closing body tags can be displayed to the screen.
When an element is contained inside another element it is considered to be...
The child of that element.
<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles).</p>
The code in the example above will result in an output that looks like the following: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
The src attribute must be set to the:
The src attribute must be set to the image's source, or the location of the image. In this case, the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.
You can create the ordered list with the ____ tag and then add individual list items to the list using _______ tags
You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags
In HTML what can you use to create a list of items in no particular order?
You can use an unordered list tag <ul>
Where can you use the line break element?
You can use the line break element anywhere within your HTML code and a line break will be shown in the browser.
The <em> tag...
emphasizes text
The <strong> tag....
highlights important text
The line break element is unique because it is only compose of a...
starting tag