Html Basics Flashcards
(58 cards)
<pre></pre>
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:</pre></pre>
<hr></hr>
horizontal line
text-align
The CSS text-align property defines the horizontal text alignment for an HTML element:
The HTML element defines text that should be marked or highlighted:
<ins></ins>
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:</ins>
</ins>
The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:
<blockquote></blockquote>
The HTML <blockquote> element defines a section that is quoted from another source.
</blockquote>
The HTML tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
<abbr></abbr>
The HTML <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.</abbr>
Marking abbreviations can give useful information to browsers, translation systems and search-engines.</abbr>
<address></address>
The HTML <address> tag defines the contact information for the author/owner of a document or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.</address>
<cite></cite>
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).</cite>
dir=”rtl”
BDO stands for Bi-Directional Override.
The HTML tag is used to override the current text direction:
The CSS border
The CSS border property defines a border around an HTML element.
p {
border: 2px solid powderblue;
}
padding
The CSS padding property defines a padding (space) between the text and the border.
target attributes
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
absolute URL vs relative URL
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
<a>Send email</a>
Link Buttons
A link can also be styled as a button, by using CSS:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Create a Bookmark in HTML
First, use the id attribute to create a bookmark:
<h2>Chapter 4</h2>
Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:
<a>Jump to Chapter 4</a>
bookmark on another page:
You can also add a link to a bookmark on another page:
<a>Jump to Chapter 4</a>
An image map is an image with clickable areas
<img></img>
Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
style=”background-image: url(‘img_girl.jpg’);”>
Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the element:
body {
background-image: url(‘img_girl.jpg’);
}
element defines a section that is quoted from another source.
Chapter 4
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: Jump to Chapter 4- Defines an unordered list
- Defines an ordered list
- Defines a list item
- Defines a description list
- Defines a term in a description list
- Describes the term in a description list
-
![]()