IES: HTML-recog dk4 Flashcards
- Includes the entire URL: protocol, domain name, and path
- Example: “https://www.laurendaigle.com/Daigle-turquoise.jpg”
Absolute address
- Can reference a file in home directory of the main HTML document by file name and may use the ../ syntax to reference that parent directory. (Example: /Daigle-turquoise.jpg)
- By default, the browser will look in HTML doc’s home directory.
Relative address
- defines the relationship between a linked resource/ document and the current document.
- Only valid with “link”, “a”, “area”, and “form” elements
- (Many are intended to help search engines locate resources associated with the HTML document to which they are assigned (a.k.a. Increase traffic to your webpage /website /document))
“rel” attribute
- small image that can be coded with HTML into a web page or browser.
- integral to modern web design: often represent actions, content, or brands & adds intuitive navigation & aesthetic appeal
- directory established in the head.
- Insert adding the class name to any inline HTML tag: (often,
<i>
&<span>
are used.) - Example coding:
~~~
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"(>)
</head>
<body>
(<) i class="material -icons">favorite</i (>)
</body>
~~~
Icon
- Order of importance (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) should implicitly convey the document structure through correct sequencing
- Correct sequencing and use of meta keywords in these is important to SEO and allows syndication into another site
**Never use these tags for their style qualities
Heading elements
- Grouping solution to the limited number of heading levels and the need to maintain a correctly sequenced document outline
- Doc may contain multiple elements of this type
- An element of this type may contain ONLY heading elements.
- Ex. code
~~~
<hgroup>
<h1>HTML</h1>
<h2>Building better websites</h2>
</hgroup>
~~~
<hgroup>
- May contain heading; hgroup; intro items like icons, banners, and table of contents; etc
- *You cannot nest these type of elements one within another
- Ex. code
~~~
<________>
<img src=”Daigle-turquoise-banner.jpg” width=”500” height=”72” alt=”Banner”>
<hgroup>
<h1>HTML</h1>
<h2>Building better websites</h2>
</hgroup>
</________>
~~~
<header>
- Acts as a wrapper (not to replace any structural element) enclosing page-wide or site-wide hyperlinks groups
- Includes ONLY page-wide or site-wide hyperlinks groups
- Ex. code
~~~
<_____ id=”horizontal”>
<h2>Site Links</h2>
<p>
<a href=”#html”>Markup</a> |
<a href=”#js”>Scripting</a> |
<a href=”#css”>Style Sheets</a> </p>
</______>
~~~
<nav>
- Empty element
- used to embed an image in an HTML page
- are not technically inserted into a web page: they are linked to web pages
- creates a holding space for the referenced image
- Ex. code
<\_\_\_\_ src=”Daigle-turquoise-banner.jpg” width=”500” height=”72” alt=”Banner”>
<img>
- This tag defines an unordered list of content: An alternative to the
<ul>
tag. - Contains
<li>
tags to create ____ items. - Includes a list of commands for the webpage or website
- Groups of hyperlinks on a webpage navigating around the page or website should be enclosed in nav tags or ____ tags.
<menu>
- Line break element Can force the text to wrap to The next line Before It would automatically wrap to the next line at the text container elements edge
<br>
- Can be included in a doc or
article, section, etc.
of a doc and provides info about the doc or division of the doc. - Normally located at the end of said elements.
- Might contain an address element (contact details, etc.); a small element (copyright, etc.); and a nav element
- Ex. code
~~~
<_________>
<nav> … </nav>
<small>Copyright © Example Corp.</small>
<address>www.example.com</address>
<_________>
~~~
<footer>
- Page content container located between the header and the footer
- Ex. code
~~~
<body>
<header>
</header>
<\_\_\_\_\_\_\_>
<p>(Page content goes here.)</p>
</\_\_\_\_\_\_\_\_>
<footer>
</footer>
</body>
~~~
<main>
- Formats text (fine print items) within the body of the document, but is only meant to contain short comments that supplement surrounding content
- Regarded as a side comment to surrounding text such as copyright information
- *Does not denote content of lesser importance
<small>
- Container for Author’s name, author’s contact info, etc.
- Often located in the footer element
<address>