Web Development Chapter 1 & 2
HTML BASICS
-All HTML documents must start with a document type declaration: <!DOCTYPE html> -The HTML document itself begins with <html> and ends with </html>. -The visible part of the HTML document is between <body> and </body>.
HTML Attributes
-All HTML elements can have attributes -Attributes provide additional information about an element -Attributes are always specified in the start tag -Attributes usually come in name/value pairs like: name="value"
<div> element
-Creates a section in your document. It's common to use <div> ele- ments to denote a section to which you will attach a style.
Semantic
-Defined as the study of meaning of linguistic expressions. -In the context of HTML, that means that tags provide meaning to the content in the HTML document. Tags do not provide presentation; they provide meaning.
HTML Headings
-HTML headings are defined with the <h1> to <h6> tags. -<h1> defines the most important heading. <h6> defines the least important heading
The href Attribute
-HTML links are defined with the <a> tag. The link address is specified in the href attribute:
HTML5
-HTML5 originates from HTML 4.01. -represents a reinvented HTML, CSS, and JavaScript in a way that solves the need for rich, interactive websites that can play audio and video and support animations from within the browser without the need for plug-ins -HTML5 contains most of the tags from HTML 4.01, but many of the tags have been redefined to be semantic tags.
HTML Tags
-Provide a meaningful structure, but do not provide presentation. Remember that separation is accomplished by providing structure in your HTML5 document, maintaining presentation in your CSS3 style sheet, and maintaining behavior in your JavaScript file.
HTML Editors
-Write HTML Using Notepad or TextEdit -Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
Element
-composed of a beginning tag, an ending tag, and the content between the tags. Consider the following HTML fragment. <div> The quick brown <b>fox</b> jumps over the lazy dog </div>
<a> Hyperlink <abbr> Abbreviation <address> Contact information <area> Image map region <article> Independent section <aside> Auxiliary section <audio> Audio stream <b> Bold text <base> Document base URI <bb> Browser button <bdo> Bi-directional text override <blockquote> Long quotation <body> Main content <br> Line break <button> Push button control <em> Stress emphasis <embed> Embedded application <fieldset> Form control group <figure> A figure with a caption <footer> Section footer <form> Form
<canvas> Bitmap canvas <caption> Table caption <cite> Citation <code> Code fragment <col> Table column <colgroup> Table column group <command> Command that a user can invoke <datagrid> Interactive tree, list, or tabular data <datalist> Predefined control values <dd> Definition description <del> Deletion <details> Additional information <dfn> Defining instance of a term <dialog> Conversation <div> Generic division <dl> Description list <dt> Description term
<h1> Heading level 1 <h2> Heading level 2 <h3> Heading level 3 <h4> Heading level 4 <h5> Heading level 5 <h6> Heading level 6 <head> Document head <header> Section header <hr> Separator <html> Document root <map> Client-side image map <mark> Marked or highlighted text <menu> Command menu <meta> Metadata <meter> Scalar measurement <nav> Navigation <noscript> Alternative content for no script support <object> Generic embedded resource <ol> Ordered list
<i> Italic text <iframe> Inline frame <img> Image <input> Form control <ins> Insertion <kbd> User input <label> Form control label <legend> Explanatory title or caption <li> List item <link> Link to resources <optgroup> Option group <option> Selection choice <output> Output control <p> Paragraph <param> Plug-in parameter <pre> Preformatted text <progress> Progress of a task <q> Inline quotation <rp> Ruby parenthesis <rt> Ruby text
HTML Comment Tags
Ex. <!--write your comments here--> With comments you can place notifications and reminders in your HTML
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):
Empty Elements
HTML Elements with no content
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: <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
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Src Attribute
HTML images are defined with the <img> tag.
Element reference
HTML5 has more than 100 defined elements that you can use to create rich webpages and applications. The W3C defines the following list of these elements with a brief description. Note that brevity is a substitute for 100 percent accuracy in these descriptions.
RGB Value
In HTML, a color can be specified as an RGB value, using this formula: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. 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). Experiment by mixing the RGB values below:
HEX Value
In HTML, a color can 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).
HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form: 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
Meta Data
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
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.
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax The property is a CSS property. The value is a CSS value.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance. The HTML <strong> element defines strong text, with added semantic "strong" importance.
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements
HTML Line Breaks
The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph The <br> tag is an empty tag, which means that it has no end tag.
HTML <del> Element
The HTML <del> element defines deleted (removed) text
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings. The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra importance. The HTML <em> element defines emphasized text, with added semantic importance.
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.
HTML <mark> Element
The HTML <mark> element defines marked or highlighted text
HTML Paragraphs
The HTML <p> element defines a paragraph Note: Browsers automatically add some white space (a margin) before and after a paragraph.
The HTML <pre> Element
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
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element
HTML <small> Element
The HTML <small> element defines smaller text
HTML <sub> Element
The HTML <sub> element defines subscripted text.
HTML <sup> Element
The HTML <sup> element defines superscripted text
HTML Background Color
The background-color property defines the background color for an HTML element
HTML Text Color
The color property defines the text color for an HTML element
HTML Fonts
The font-family property defines the font to be used for an HTML element
HTML Text Size
The font-size property defines the text size for an HTML element
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).
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element
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.