HTML Elements vs Attributres:
Help!
|
|
||||
|---|---|---|---|---|---|
| show | elements, tags, and attributes.
🗑
|
||||
| an HTML element is any object that sits on your page. An attribute provides further detail about a ________ HTML element. | show 🗑
|
||||
| So exactly what is an HTML element? And, what are they used for? | show 🗑
|
||||
| nearly all HTML elements are comprised of both a _________ tag and an _______ tag. | show 🗑
|
||||
| show | Some only have opening tags. A great example of this is an image. An image element looks like this...
<img>
🗑
|
||||
| must always appear inside an HTML element's opening tag. | show 🗑
|
||||
| show | property="value"
🗑
|
||||
| Each HTML element has specific _________ that you can use. You can use as many attributes for each element as you need (so long as the attribute goes with that element | show 🗑
|
||||
| The order you place attributes in doesn't matter, but they must be separated by a single space in the HTML element's ________ tag. | show 🗑
|
||||
| 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 🗑
|
||||
| What if we want to set some dimensions for the image? We can do that by adding more attributes to the img element, like this. | show 🗑
|
||||
| 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 🗑
|
||||
| Examples of elements without closing tags: | show 🗑
|
||||
| two broad categories of HTML elements: | show 🗑
|
||||
| show | It takes up the entire width of the page.
🗑
|
||||
| show | <div>, <p>, <h1>, <h6>, <form>, <ol>, <ul> and <li>, e.t.c.
🗑
|
||||
| On the other hand, the inline-level elements are mainly in the contents of a block. In addition to that, their width is based on how much space that individual element needs: | show 🗑
|
||||
| HTML tags are what defines where an HTML element _____ and where it _______. There is usually an opening bracket followed by the element’s name and, finally, a closing bracket. | show 🗑
|
||||
| show | modifies;
behavior
🗑
|
||||
| show | The first one is usually the name of the attribute, while the other one is its value
🗑
|
||||
| The two are usually separated by an ____________. Attributes are inside the start tag of that particular element that needs modification. | show 🗑
|
||||
| Let us look at the various types of HTML attributes. | show 🗑
|
||||
| show | 2. The next type is the optional attributes. Their role is to change the default functionality of an element.
On the other hand, standard attributes can support several element types.
🗑
|
||||
| show | 3. Last but not least, there are event attributes that allow element types to declare scripts that will run under certain circumstances.
🗑
|
||||
| Examples of various HTML attributes: | show 🗑
|
||||
| show | 1. <td align=right>
2. <a href=" cnn </a>
3. <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
🗑
|
||||
| show | class, contextmenu, data, hidden, id, lang, style and title among others.
🗑
|
||||
| show | HTML attributes
🗑
|
||||
| Attributes consist of a ________ and are usually set equal to a value. Values are enclosed in: | show 🗑
|
||||
| show | <tagname attribute="value"></tagname>
🗑
|
||||
| Attribute names are not case-sensitive: | show 🗑
|
||||
| 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
🗑
|
||||
| Sets the direction of the text of an HTML element. | show 🗑
|
||||
| Used to specify a unique id for an HTML element, which cannot be shared across multiple elements within the same HTML document. | show 🗑
|
||||
| show | src
🗑
|
||||
| Specifies how an element will be rendered in a web browser. | show 🗑
|
||||
| Contains and can display the specified information about the element it belongs to. | show 🗑
|
||||
| Classic universal attributes are allowed in most HTML tags. The examples below are the most common: | show 🗑
|
||||
| Specific HTML attributes Example: | show 🗑
|
||||
| New attributes since HTML5: | show 🗑
|
||||
| Event attributes Examples: | show 🗑
|
||||
| tell the browser how to display the text, images, and other content on the page, as well as tell the browser other useful bits of information. | show 🗑
|
||||
| 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 🗑
|
||||
| show | These are called empty elements.
🗑
|
||||
| One empty element you’ll see often is the line break element, which adds a line break between text: | show 🗑
|
||||
| Other common ___________ include <img> (image), <meta>, <link>, and <input>. | show 🗑
|
||||
| show | this is called nesting and is key to how HTML documents are assembled.
🗑
|
||||
| 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 🗑
|
||||
| Common block-level elements include: | show 🗑
|
||||
| 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>
🗑
|
||||
| show | Inline-level elements
🗑
|
||||
| show | new line
🗑
|
||||
| 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