HTML Flashcards
1- BASIC:
1) All HTML DOCUMENTS must start with a document type declaration: !DOCTYPE html>.
2) The HTML document itself begins with html> and ends with /html>.
3) The visible part of the HTML document is between >body> and >/body>.
4) HTML HEADINGS are defined with the <h1> to <h6> tags.
5) <h1> defines the most important heading. <h6> defines the least important heading:
6) HTML headings are defined with the <h1> to <h6> tags.
7) HTML PARAGRAPHS are defined with the </h6></h1></h6></h1></h6></h1><p> tag
7) HTML LINKS are defined with the <a> tag. The link’s destination is specified in the href attribute.
8) HTML IMAGES are defined with the <img></img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes.
9) HTML BUTTONS are defined with the tag
10) HTML LISTS are defined with the <ul> (unordered/bullet list) or the </ul><ol> (ordered/numbered list) tag, followed by <li> tags (list items).</li></ol></a></p>
2- HTML Elements
1) An HTML element usually consists of a start tag and an end tag, with the content inserted in between:
tagname>Content goes here…/tagname>
2) Nested HTML Elements: HTML elements can be nested (elements can contain elements).
3) Do Not Forget the End Tag
4) HTML elements with no content are called empty elements. <br></br>
5) HTML Is Not Case Sensitive: HTML tags are not case sensitive: <p> means the same as </p><p>.</p>
3- HTML Attributes
1) All HTML elements can have attributes
2) ATTRIBUTES provide additional information about an element
3) Attributes are always specified in the start tag
4) Attributes usually come in name/value pairs like: name=”value”
5) HTML LINKS are defined with the <a> tag. The link address is specified in the href attribute.
6) HTML IMAGES are defined with the <img></img> tag. The filename of the image source is specified in the src attribute
7) HTML images also have WIDHT AND HEIGTH ATTRIBUTES, which specifies the width and height of the image. The width and height are specified in pixels by default; so width=”500” means 500 pixels wide.
8) The ALT attribute specifies an alternative text to be used, if an image cannot be displayed.
9) The value of the alt attribute can be read by screen readers. This way, someone “listening” to the webpage, e.g. a vision impaired person, can “hear” the element.
10) The STYLE ATTRIBUTE is used to specify the styling of an element, like color, font, size etc.
11) The LANGUAJE of the document can be declared in the tag. The language is declared with the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines. The first two letters specify the language (en). If there is a dialect, add two more letters (US).
12) A TITLE ATTRIBUTE is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph.</a>
13) We Suggest: Use Lowercase Attributes. The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE. W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
14) We Suggest: Quote Attribute Values: The HTML5 standard does not require quotes around attribute values. For intance the href attribute can be written without quotes.
15) Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.
_______________
Chapter Summary
- All HTML elements can have attributes
- The title attribute provides additional “tool-tip” information
- The href attribute provides address information for links
- The width and height attributes provide size information for images
- The alt attribute provides text for screen readers
At W3Schools we always use lowercase attribute names
At W3Schools we always quote attribute values</p></a>
4- HTML Headings
1) HEADINGS are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
2) Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property: h1 style = "font-size: 60px;
3) The <hr></hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr></hr> element is used to separate content (or define a change) in an HTML page</h6></h1>
</h6></h1>
5- BASIC STRUCTURE:
> !DOCTYPE html>
html>
>head>
>/head>
>body>
h1 -This is a Heading- /h1
p -This is a paragraph.- /p
>/body>
>/html>
1) The !DOCTYPE html> declaration defines this document to be HTML5
2) The html> element is the root element of an HTML page
3) The head> element contains meta information about the document
4) The title> element specifies a title for the document
5) The body> element contains the visible page content
6) The h1> element defines a large heading
7) The p> element defines a paragraph
6- HTML Paragraphs:
> p>This is a paragraph. /p>
p>This is another paragraph. /p>
> pre> Element
Tag Description
<p> Defines a paragraph
<br></br> Inserts a single line break
</p>
<pre> Defines pre-formatted text</pre>
7- HTML Tags:
1) HTML tags are element names surrounded by angle brackets:
tagname>content goes here… /tagname>
2) HTML tags normally come in pairs like p> and /p>
3) The first tag in a pair is the start tag, the second tag is the end tag
4) The end tag is written like the start tag, but with a forward slash inserted before the tag name
8- The !DOCTYPE> Declaration:
- The !DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
- It must only appear once, at the top of the page (before any HTML tags).
- The !DOCTYPE> declaration is not case sensitive.
- The !DOCTYPE> declaration for HTML5 is:
!DOCTYPE html>
9- HTML History:
Year Version 1989 Tim Berners-Lee invented www 1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1 2017 W3C Recommendation: HTML5.1 2nd Edition
10- HTML Styles:
- Setting the style of an HTML element, can be done with the style attribute.
- Syntax: >tagname style=”property:value;”>
- The CSS BACKGROUND-COLOR property defines the background color for an HTML element.
>body style=”background-color:powderblue;”> - The CSS COLOR property defines the text color for an HTML element:
>h1 style=”color:blue;”>This is a heading>/h1>
>p style=”color:red;”>This is a paragraph.>/p> - The CSS FONT-FAMILY property defines the font to be used for an HTML element:
>h1 style=”font-family:verdana;”>This is a heading>/h1>
>p style=”font-family:courier;”>This is a paragraph.>/p> - The CSS FONT-SIZE property defines the text size for an HTML element:
>h1 style=”font-size:300%;”>This is a heading>/h1>
>p style=”font-size:160%;”>This is a paragraph.>/p> - The CSS TEXT-ALIGN property defines the horizontal text alignment for an HTML element:
>h1 style=”text-align:center;”>Centered Heading>/h1>
>p style=”text-align:center;”>Centered paragraph.>/p>
____________________
Chapter Summary - Use the style attribute for styling HTML elements
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
11- HTML Formatting Elements:
- Formatting elements were designed to display special types of text:
<b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text mark> Defines marked/highlighted text </del></ins> Defines inserted text</sup></sub></strong></small></i></em></b></sup></sub></ins></del></small></em></i></strong></b>
12- HTML Quotation and Citation Elements:
- The HTML element defines a short quotation:
(p>WWF’s goal is to: (q>Build a future where people live in harmony with nature.(/q>(/p> - The HTML <blockquote> element defines a section that is quoted from another source.
>p>Here is a quote from WWF’s website:>/p>
>blockquote cite=”http://www.worldwildlife.org/who/index.html”>
For 50 years, WWF has been protecting the future of nature.
>/blockquote> - The HTML <abbr> element defines an abbreviation or an acronym.
>p>The (abbr title=”World Health Organization”>WHO(/abbr> was founded in 1948.>/p></abbr>
- The HTML <address> element defines contact information (author/owner) of a document or an article. >address> Written by John Doe.(br> Visit us at:(br> >/address>
- The HTML <cite> element defines the title of a work.
>p>(cite>The Scream(/cite> by Edvard Munch. Painted in 1893.>/p></cite> - The HTML element defines bi-directional override.
>bdo dir=”rtl”>This text will be written from right to left>/bdo>
____________________
Tag Description
<abbr> Defines an abbreviation or acronym</abbr>
<address> Defines contact information for the author/owner of a document
Defines bi-directional override.
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
Defines a short inline quotation</cite></blockquote></address>
</abbr></cite></address></abbr></blockquote>
13- HTML Comments:
- You can add comments to your HTML source by using the following syntax:
>!– Write your comments here –>
14- HTML Colors:
- HTML COLORS are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
- COLOR NAMES: In HTML, a color can be specified by using a color name: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray
- BACKGROUND COLOR: You can set the background color for HTML elements:
>h1 style=”background-color:DodgerBlue;”>Hello World>/h1>
>p style=”background-color:Tomato;”>Lorem ipsum…>/p> - TEXT COLOR: You can set the color of text:
>h1 style=”color:Tomato;”>Hello World>/h1>
>p style=”color:DodgerBlue;”>Lorem ipsum…>/p>
>p style=”color:MediumSeaGreen;”>Ut wisi enim…>/p> - BORDER COLOR: You can set the color of borders:
>h1 style=”border:2px solid Tomato;”>Hello World>/h1>
>h1 style=”border:2px solid DodgerBlue;”>Hello World>/h1>
>h1 style=”border:2px solid Violet;”>Hello World>/h1> - COLOR VALUES: In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
>h1 style=”background-color:rgb(255, 99, 71);”>…>/h1>
>h1 style=”background-color:#ff6347;”>…>/h1>
>h1 style=”background-color:hsl(9, 100%, 64%);”>…>/h1>
>h1 style=”background-color:rgba(255, 99, 71, 0.5);”>…>/h1>
>h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>…>/h1> - HTML RGB Colors:
1) RGB Value
rgb(red, green, blue)
rgb(255, 0, 0)
2) RGBA Value
rgba(red, green, blue, alpha)
- HTML HEX Colors:
HEX Value
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff - HTML HSL Colors
HSL Value
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white - SATURATION
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color. - LIGHTNESS
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white). - HSLA Value: HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
15- HTML Styles - CSS:
a) Styling HTML with CSS (stands for Cascading Style Sheets).
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
- CSS saves a lot of work. It can control the layout of multiple web pages all at once.
- CSS can be added to HTML elements in 3 ways:
1) Inline - by using the style attribute in HTML elements
2) Internal - by using a element in the section
3) External - by using an external CSS file
____________________
b) INLINE CSS - An inline CSS is used to apply a unique style to a single HTML element.
- An inline CSS uses the style attribute of an HTML element.
> h1 style=”color:blue;”>This is a Blue Heading>/h1>
____________________
c) INTERNAL CSS: is used to define a style for a single HTML page.
An internal CSS is defined in the section of an HTML page, within a element:
>!DOCTYPE html>
>html>
>head>
>style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
>/style>
>/head>
>body>
>h1>This is a heading(/h1>
>p>This is a paragraph.(/p>
>/body>
>/html>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
d) EXTERNAL CSS: An external style sheet is used to define the style for many HTML pages.
- With an external style sheet, you can change the look of an entire web site, by changing one file!
- To use an external style sheet, add a link to it in the section of the HTML page:
>!DOCTYPE html>
>html>
>head>
>link rel="stylesheet" href="styles.css">
>/head>
>body>
>h1>This is a heading>/h1>
>p>This is a paragraph.>/p>
>/body>
>/html>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
e) CSS FONTS: The CSS color property defines the text color to be used.
- The CSS font-family property defines the font to be used.
- The CSS font-size property defines the text size to be used.
>!DOCTYPE html>
>html>
>head>
>style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
>/style>
>/head>
>body>
>h1>This is a heading
>p>This is a paragraph.
>/body>
>/html>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
f) CSS BORDER: property defines a border around an HTML element:
p {
border: 1px solid powderblue;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
g) CSS PADDING: The CSS padding property defines a padding (space) between the text and the border:
p {
border: 1px solid powderblue;
padding: 30px;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
h) CSS MARGIN: The CSS margin property defines a margin (space) outside the border:
p {
border: 1px solid powderblue;
margin: 50px;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
i) The ID ATTRIBUTE: To define a specific style for one special element, add an id attribute to the element:
> p id=”p01”>I am different(/p>
#p01 {
color: blue;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
j) The CLASS ATTRIBUTE: To define a style for special types of elements, add a class attribute to the element:
> p class=”error”>I am different(/p>
then define a style for the elements with the specific class:
p.error {
color: red;
}
____________________
k) EXTERNAL REFERENCES: External style sheets can be referenced with a full URL or with a path relative to the current web page.
Example
(link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”>
____________________
Chapter Summary
- Use the HTML style attribute for inline styling
- Use the HTML element to define internal CSS
- Use the HTML <link></link> element to refer to an external CSS file
- Use the HTML <head> element to store <style> and <link></link> elements
- Use the CSS color property for text colors
- Use the CSS font-family property for text fonts
- Use the CSS font-size property for text sizes
- Use the CSS border property for borders
- Use the CSS padding property for space inside the border
- Use the CSS margin property for space outside the border</style>
