HTML
<del>
Deleted text
<em>
Emphasized text
HTML stands for...
Hyper Text Markup Language
<small>
Small text
id Attribute
Specifies a unique id for an element
<sub>
Subscript text
<sup>
Superscript text
HTML Style Attribute
- <tagname style="property:value;"> - Sets the style of am HTML element - The property is a CSS property. The value is a CSS value.
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
HTML Display
- You cannot be sure how HTML will be displayed. - Large or small screens, and resized windows will create different results. - With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. - The browser will remove any extra spaces and extra lines when the page is displayed
Metadata
- a set of data that describes and gives information about other data - typically defines the document title, character set, styles, links, scripts, and other meta information.
The title Attribute
- 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 - provides additional "tool-tip" information
<b>
Bold text
<img>
The tag HTML images are defined with
<body> and </body>
The visible part of the HTML document is between
The <head> element
contains meta information about the document
The <body> element
contains the visible page content
The <h1> element
defines a large heading
The <p> element
defines a paragraph
Conditional Comments
defines some HTML tags to be executed by Internet Explorer only.
The <html> element
is the root element of an HTML page
The <title> element
specifies a title for the document
<h1> to <h6>
tags HTML heading are defined with
HTML <head> Element
- HAS NOTHING TO DO WITH HTML HEADINGS - is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. - is placed between the <html> tag and the <body> tag:
Empty Elements
- HTML elements with no content - HTML5 does not require empty - can be "closed" in the opening tag like this: <br /> elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
Size Attributes
- HTML images are defined with the <img> tag. - The filename of the source (src), and the size of the image (width and height) are all provided as attributes
The href Attribute
- HTML links are defined with the <a> tag. The link address is specified in the href attribute - provides address information for links
RGB Value
- In HTML, a color can also be specified as an RGB value - Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255
HEX Value
- In HTML, a color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255) -For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00)
Color
- In HTML, a color can be specified by using a color name, an RGB value, or a HEX value. - HTML supports 140 standard color names - For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0 - To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0) - To display the color white, all color parameters must be set to 255, like this: rgb(255,255,255)
CSS can be added to HTML elements in 3 ways
- Inline - Internal - External **The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself**
CSS in HTML
- It describes how HTML elements are to be displayed on screen, paper, or in other media. - It can control the layout of multiple web pages all at once
Headings Are Important
- Search engines use the headings to index the structure and content of your web pages. - Users skim your pages by its headings. It is important to use headings to show the document structure. - <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. - Use HTML headings for headings only. Don't use headings to make text BIG or bold.
HTML Horizontal Rules
- The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. - The <hr> element is used to separate content (or define a change) in an HTML page
HTML Text Size
- The font-size property defines the text size for an HTML element - Exp: <h1 style="font-size:300%;">This is a heading</h1>
The lang Attribute
- The language of the document can be declared in the <html> 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, use two more letters (US).
HTML Text Alignment
- The text-align property defines the horizontal text alignment for an HTML element - Exp: <h1 style="text-align:center;">Centered Heading</h1>
<pre>
- This element defines preformatted text - The text inside this element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks - Defines pre-formatted text
Attributes
- Used to provide additional information about HTML elements - Always specified in the start tag - Usually come in name/value pairs like: *name="value"*
<br>
- an empty element without a closing tag -this tag defines a line break - can be "closed" in the opening tag like this: <br /> - Use this tag if you want a line break (a new line) without starting a new paragraph
HTML tags...
- are element names surrounded by angle brackets - normally come in pairs like <p> and </p> <tagname>content goes here...</tagname>
<blockquote>
- defines a section that is quoted from another source - Browsers usually indent these elements
<q>
- defines a short inline quotation - Browsers usually insert quotation marks around this element
<abbr>
- defines an abbreviation or an acronym - Marking abbreviations can give useful information to browsers, translation systems and search-engines.
<bdo>
- defines bi-directional override - Defines the text direction - used to override the current text direction
<address>
- defines contact information (author/owner) of a document or an article - Usually displayed in italic. Most browsers will add a line break before and after the element.
HTML Background Color
- defines the background color for an HTML element - Exp: <body style="background-color:powderblue;">
HTML Text Color
- defines the text color for an HTML element - Exp: <h1 style="color:blue;">This is a heading</h1>
<cite>
- defines the title of the work - Browsers usually display these elements in italic
HTML...
- describes the structure of Web pages using markup - elements are the building blocks of HTML pages - elements are represented by tags - tags label pieces of content such as "heading", "paragraph", "table", and so on -Browsers do not display the HTML tags, but use them to render the content of the page
W3C recommends...
- quotes in HTML, and demands quotes for stricter document types like XHTML - Sometimes it is necessary to use quotes - always use lowercase attribute names
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 alt Attribute
- specifies an alternative text to be used, when an image cannot be displayed. - The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element. - provides text for screen readers
The <!DOCTYPE html> declaration
- the document type declaration all HTML documents must start with - defines this document to be HTML5
<a>
- the tag HTML links are defined with - The link's destination is specified in the href attribute
Inline CSS
- used to apply a unique style to a single HTML element - uses the style attribute of an HTML element
Internal CSS
- used to define a style for a single HTML page
External CSS
- used to define the style for many HTML pages - you can change the look of an entire web site, by changing one file! - An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension
Comment Tags <!-- Write your comments here -->
- used to insert comments in the HTML source code - Comments are not displayed by the browser, but they can help document your HTML source code - With comments you can place notifications and reminders in your HTML - Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors
Formatting Elements
-HTML also defines special elements for defining text with a special meaning - HTML uses elements like <b> and <i> for formatting output, like bold or italic text. - Formatting elements were designed to display special types of text
CSS
Cascading Style Sheets
<strong>
Important text
<ins>
Inserted text
<i>
Italic text
<mark>
Marked text
style Attribute
Specifies an inline CSS style for an element
disabled Attribute
Specifies that an input element should be disabled
src Attribute
Specifies the URL (web address) for an image
