HTML Elements vs Attributres:
Quiz yourself by thinking what should be in
each of the black spaces below before clicking
on it to display the answer.
Help!
|
|
||||
|---|---|---|---|---|---|
| In HTML, there are three common terms that are often used interchangeably: | show 🗑
|
||||
| show | particular
🗑
|
||||
| show | an HTML element is an object that sits on a web page. What kinds of objects can sit on a web page? Things like paragraphs, images, headings and subheadings, navigation menus, bulleted lists, a footer...these are all examples of HTML elements.
🗑
|
||||
| nearly all HTML elements are comprised of both a _________ tag and an _______ tag. | show 🗑
|
||||
| most HTML elements open, contain some content, and the close. But not all HTML elements work like this: | show 🗑
|
||||
| show | attributes
🗑
|
||||
| Normally attributes are comprised of a property and a value, like this: | show 🗑
|
||||
| show | attributes
🗑
|
||||
| show | opening
🗑
|
||||
| How about our image? First, let's specify the graphic file that we'd like to load into our web page. We do that with the src attribute, like this: | show 🗑
|
||||
| show | <img src=" width="600" height="200">
🗑
|
||||
| the phrase HTML __________ and HTML _____ are used interchangeably. Many people use them when referring to the same thing. | show 🗑
|
||||
| HTML elements and HTML tags are not the same: | show 🗑
|
||||
| When it comes to _________, these are the building blocks of this language. Each element is an individual component on a particular web page or document. | show 🗑
|
||||
| HTML elements are in every part of the ______, including the header, footer, body, and text. | show 🗑
|
||||
| not all the HTML elements have _______ words. They go by the names void, singleton, or empty elements. | show 🗑
|
||||
| show | This text contains<br>a line break.
<img src="images/logo.png">
🗑
|
||||
| show | They are the inline-level as well as the block-level HTML elements
🗑
|
||||
| show | It takes up the entire width of the page.
🗑
|
||||
| There is always a line before and after a block HTML element. Examples include: | show 🗑
|
||||
| show | They include <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input> and <button> among others.
🗑
|
||||
| show | starts;
ends
🗑
|
||||
| an HTML attribute is what _________ an HTML element. It is usually in the form of unique words that one inserts inside the opening tag. They control the ________ of the element that follows. | show 🗑
|
||||
| Every tag has two sections: | show 🗑
|
||||
| show | equals(=) sign.
🗑
|
||||
| show | 1. The first ones are the required attributes. As the name suggests, they are needed by particular element types for them to function as expected.
🗑
|
||||
| Let us look at the various types of HTML attributes. | show 🗑
|
||||
| show | 3. Last but not least, there are event attributes that allow element types to declare scripts that will run under certain circumstances.
🗑
|
||||
| show | <input type = "text" name="email" size=15 value="type name here">
🗑
|
||||
| Examples of various HTML attributes: | show 🗑
|
||||
| Standard attributes include: | show 🗑
|
||||
| are data that can be added to the opening tag of an HTML element. These attributes modify the default behavior of the element or provide additional information about it. | show 🗑
|
||||
| show | name;
double or single quotation marks.
🗑
|
||||
| The syntax for adding attributes to an HTML element is as follows: | show 🗑
|
||||
| show | but it is good practice to write HTML markup in lowercase.
🗑
|
||||
| show | <img> element
🗑
|
||||
| show | <img src="source_of_image.png" width="500" height="600" />
🗑
|
||||
| The disabled attribute is applied to form elements like buttons and inputs to make them nonfunctional: | show 🗑
|
||||
| show | class
🗑
|
||||
| show | dir
🗑
|
||||
| show | id
🗑
|
||||
| Specifies the location of a digital source. | show 🗑
|
||||
| Specifies how an element will be rendered in a web browser. | show 🗑
|
||||
| show | title
🗑
|
||||
| Classic universal attributes are allowed in most HTML tags. The examples below are the most common: | show 🗑
|
||||
| show | old, height, width,href, target, rel, src, autoplay, poster
🗑
|
||||
| New attributes since HTML5: | show 🗑
|
||||
| Event attributes Examples: | show 🗑
|
||||
| show | HTML elements
🗑
|
||||
| Most HTML elements consist of three parts: | show 🗑
|
||||
| show | 2. The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket.
🗑
|
||||
| Most HTML elements consist of three parts: | show 🗑
|
||||
| While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or content: | show 🗑
|
||||
| show | The line break element is made with the empty <br> tag
🗑
|
||||
| show | empty elements
🗑
|
||||
| HTML elements can also be placed inside of other elements — | show 🗑
|
||||
| Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the paragraph element. | show 🗑
|
||||
| show | <p>This is paragraph text. <a href=" is a link to the HubSpot homepage.</a> This is more text.</p>
🗑
|
||||
| A ____________ creates a new section on the page. By default, a _____________ stretches to fill 100% of the viewport (i.e., the visible area of the web page) and always starts a new line. | show 🗑
|
||||
| show | <p>, <h1> to <h6> (page headings), <table>, <ul> (unordered list), <ol> (ordered list), and <div>
🗑
|
||||
| show | <h2>This is a page heading</h2>
<p>This is a paragraph. Here's an ordered list:</p>
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
🗑
|
||||
| show | <h2>This is a page heading</h2>
<p>This is a paragraph. Here's an ordered list:</p>
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
🗑
|
||||
| _____________ exist in line with their parent element. Both the width and height of an inline-level element are set by its content. | show 🗑
|
||||
| inline-level elements do not start a ________, meaning you can put multiple of them on the same line. | show 🗑
|
||||
| show | <a>, <img>, <em> (emphasis; italicizes an element), <strong> (bolds an element), <button>, and <span>.
🗑
|
||||
| Here are some common HTML tags you’ll see on web pages: | show 🗑
|
Review the information in the table. When you are ready to quiz yourself you can hide individual columns or the entire table. Then you can click on the empty cells to reveal the answer. Try to recall what will be displayed before clicking the empty cell.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
Created by:
rtshmm