HTML Introdction

Attributes in HTML

Audio_Video in HTML

Basic HTML

Block _ Inline Elements HTML

Block Elements

Inline Elements

Charsets HTML

Classes HTML

Colors HTML

Comments HTML

Computer code HTML

CSS HTML

HTML Div

HTML Elements

HTML Formatting

HTML Forms _ Input

HTML Frames

Images HTML

Links HTML

Lists HTML

Semantic Elements HTML

HTML Tables

Styles _ Semantics HTML

Meta Info HTML

HTML Others

Programming HTML

Input Attributes HTML

Christ Is Alive Ministry Learning Code for God

Far from being done please come back to visit

<!---..-->
  • Defines a comment
!DOCTYPE
  • Defines the document type
  • All HTML documents must start with the document type declaration
  • The declaration helps the browsers to display web pages correctly and represents the document type
  • Only appearing once at the top of the page.
  • The declaration is not case sensitive
  • The declaration for HTML 1 to HTML 5 is
<a>
<acronym>
  • Defines an acronym but isn't supported in HTML5 Use <abbr> instead
<abbr>
  • Defines an abbreviation or an acronym
<address >
  • Defines contact information for the author/owner of a document

An HTML element is defined by a start tag, some content, and an end tag

<tagname> Content goes here ....</tagname>

Example: <p> My first paragraph </p>

<applet >
  • Defines an embedded applet but not supported in HTML5 Have to use <object> or <embed>
<alt>
  • The alt attribute should reflect the image content, so users who can not see the image can get an understanding of what the image contains.
<applet>
  • Not supported in HTML5
  • Use <embed> or <object>
<area>
  • Defines an area inside an image map
<article>
  • The <article> tag specifies independent, self-contained content.
  • An article should make sense on its own
  • It should be possible to distribute it independently from the rest of the site.
  • An article should make sense on its own and Potential sources for the <article> element:
      • Forum post
      Blog post
      News story
<aside>
  • Independent content is specified by the article tag.
    •
  • Tag used to add a piece of content that is related to the main content. It could be a box to add a quote, or a sidebar.
 

DON'T FORGET THE END TAG: Some HTML elements will display correctly some will not.

<audio>
  • Defines embedded sound content
  • The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
  • The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
  • The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
  • The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
  • There are three supported audio formats in HTML: MP3, WAV, and OGG.
<b>
  • Defines bold text will look the same on the page but not important like <strong>
<base >
  • The base tag, represented by <base> specifies the base URL for all relative links within the HTML code of a specific page or document.
  • The base tab must be within the <head> of the code and can only be one single <base> element in a document.
  • The tag must have either an href or a target attribute present, or both.
<basefont >
  • Did specified a default color, size, and font for all text in a document.
  • No longer supported in HTML5 use CSS
<baseline>
  • A image is aligned with the baseline of the parent (default)
<bdi>
  • Isolates a part of text that might be formatted in a different direction from other text outside it.

HTTML tags are not case sensitive: <P> (uppercase) means the same as <p> (lowercase)

<bdo>
  • Overrides the current text direction
<big>
  • Defines Big text But no longer supported Must use CSS
<blockquote>
  • Defines a section of Document that is quoted from other sources.
<body>
  • Defines the document's body
<bottom>
  • A image is aligned with the lowest element on the line
<br>
  • Defines a single line break
<button>
  • Defines a clickable button
<canvas>
  • Use JavaScript to draw graphics on the fly, via scripting
<caption>
  • Defines a table caption
  • Defines centered text,
  • No longer supported in HTML5
  • Use CSS
<cite>
  • Defines the title of a work
<code>
  • Defines a piece of computer code
<col>
  • Specifies column properties for each column within a <colgroup> element.
<!--- -->
  • Defines a comment that will not show on the web page,stays in the code section
<datalist>
  • Specifies a list of pre-defined options for input controls
<dd>
  • Defines a description/value of a term in a description list
<del>
  • Defines text that has been deleted from a document
<details>
  • Defines additional details that the user can view or hide
<dfn>
  • Specifies a term that is going to be defined within the content
<dialog>
  • Defines a dialog box or window
<dir>
  • Defines a directory list,
  • Use <ul> Not supported in HTML5
<disabled>
  • The input <disabled> attribute specifies that an input field should be disabled
  • The value of a disabled input field will not be sent when submitting the form
  • A disabled input field is unusable and un-clickable
<div>
  • Defines a section in a document.
<dl>
  • Stands for Description list.
  • Is a block-level element that the browsers automatically add a margin before and after the element and always starts on a new line.
  • Block-level element always stretches out to the left and right as far as it can taking up the full width available.
  • One of the three elements that is used to create a description list.
<dt>
<em>
  • This unit is relative to the font size of its parent element.
  • It will be twice the size of its parent element's font size if you set it to 2em
<embed>
  • Defines a container for an external application
<fieldset>
  • Groups related to elements in a form
<figcaption>
  • Defines a caption for a <figure> element
<figure>
  • Specifies self-contained content
  • Defines font, color, and size for text.
  • Use CSS Not supported in HTML5
<footer>
  • Defines a footer for a document or section
<form>
  • Defines an HTML form for user input
  • Defines a window (frame) in a frame set,
  • Not supported in HTML5
<frameset>
  • Defines an alternate content for users that do not support frames.
  • Not s upported in HTML5
<head>
  • Defines a header for a document or section
  • Contains meta date/information for the document
<h1>_<h6>
  • Defines HTML headings with the tags
  • <h1> defines the most important heading also the largest in text size with <h6> defing the least important heading and the smallest in text size.
<height_width>
  • Without the height and width for an <input type="image"> different browsers cannot reserve the appropriate space for the image to load into.
hgroup
  • Defines a header and related content
<href>
  • All Html elements can have attributes
  • Attributes usually come in name/value pairs like: name="value"
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • The href attributes the URL of the page the link is going to.
  • The<area> tag defines an area inside an image map (an image map is an image with clickable area).
  • <area> elements are always nested inside a <map> tag.
  • The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
<html>
  • Defines the root of an HTML document
<hr>
  • Defines a thematic change in the content
<i>
  • Defines a part of text in an alternate voice or mood.
<id>
  • Unique identifice dishinguishs the <a> from every other tag on that page
<iframe>
  • Defines an inline frame
<images>
  • HTML images are defined with the <img> tag
  • The source file <src> alternative text <alt>are provided as attributes
  • img src="../repel.jpg" width="100" height="100"
<input>
  • Defines an input control
ins
  • Defines a text that has been inserted into a document.
<kbd>
  • The <kbd> element defines keyboard input
<label>
  • Defines a label for an <input> elements
<lang>
  • All HtML elements can have attributes
  • Attributes usually come in name/value pairs like: name="value"
legend
  • Defines a caption for a <fieldset> element
<length>
  • Image that raises or lower an element by the specified length
  • Negative values are allowed.
<li>
  • Defines a list item
<link>
  • HTML links are defined with the <a> tag
  • The link's destination is specified in the <href>
  • Defines the relationship between a document and an external resuouce (most used to link to style sheets)
<list>
  • The list attribute refers to a datalist element that contains pre-defined options for an input element.
<main>
  • <main> tag a structural element that is representing the main content of a document.
  • Encapsulatine the primary content it is like the central hub of the web page
      • By wrapping your main content within this tag you are signaling to the developers and browsers taht is the core information that is being sought by the users.
  • Specifies the main content of a document, unique to the document
  • Shouldn't contain any content that is repeated across documents such as navigation links, copyright information, sidebars, site logos, and search forms
  • Have only one main element in a document and must not be a descendant of an <nav>, <header>, <article> and or a < hander>
<map>
  • Defines an area inside an image map
  • An image map is an image with clickable areas
  • <area> elements are always nested inside a <map> tag.
  • The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
<mark>
  • Defines highlighted text
<maxlength>
  • The input maxlength attribute specifies the mazimum number of charachters allowed in an input field
<menu>
  • Defines an alternative unordered list
meta
  • Defines metadata about an HTML document
<meter>
  • Defines within a known range a scalar measurement (a.gauge)
<middle>
  • A image that is place in the middle of the parent element
<min and max>
  • Used together the max and min attributes creates a range of legal values.
<multiple>
  • The multiple attribute specifies that the user is allowed to enter more than one value n an input field
  • The multiple attribute works with the following input types
      • email
      file
<noframes>
  • Defines an alternate content for users that do not support frames
  • Not supported in HTML5
<name>
  • Defines a table
<nav>
  • Defines navigation links
<Nested Elements>
  • HTML elements can be nested or that elements can contain other elements
<noscript>
  • Defines an alternate content for users that do not support client-side scripts
<object>
  • Defines a container for an external application
<ol>
  • Defines an ordered list
<optgroup>
  • Defines a group of related options in a drop-down list
<option>
  • Defines an option in a drop-down list
<output>
  • Defines a container for an external application
<p>
  • Defines a paragraph
<param>
  • Defines a parameter for an object
<paragraph>
  • The <p> is used to define HTML Paragraphs
<pattern>
  • The pattern attribute works witht he following input types:
      • text
      date
      search
      url
      tel
      email
      password
  • The input pattern attribute specifies a regular expression that the input field's value is checked against when the form is sumitted.
<picture>
  • Defines a container for multiple image resources
<percent>
  • a image that raises or lower an element by the specified percent of the line-height property.
  • Negative values are allowed.
<placeholder>
  • The placeholder attribute works with the following input types:
      • text
      search
      url
      number
      tel
      email
      password
<pre>
  • preformatted text
<progress>
  • Represents the progress of a task
<px>
  • This is a fixed unit.
  • What ever element's width is to (100px) it will always be (100px) wide regardless of the user's settings or screen size.
  • It is precise but not scalable
<q>
  • Defines a short quotation
<read-only>
  • The value of a read-only input field will be sent when submiting the form
<rem>
  • It is relative to the root HTML font size and similar to <em>
  • It doesn't depend on the parent element's size so it provides a more consistent sizing.
  • If the root size is 16px and the element's size is set to 2rem, it will be 32px
<required>
  • The input required attribute specifies that an input field must be filled out before submitting the form
  • The required attribute works with the following input tpes:
      • file
      radio
      checkbox
      number
      date-pickers
      password
      email
      tel
      url
      search
      text
<rp>
  • Defines what to show in browsers that do not support ruby annotations.
<rt>
  • Defines an pronunciation/explanation of a characters (for East Asian Typography)
<ruby>
  • Defines a ruby annotation ( for Asian Typography)
<s>
  • Defines text that is no longer correct
<samp>
  • Defines sample out put from a computer program
<section>
  • Defines a section in a document
<select>
  • Defines a drop-down list
<single>
  • When the attribute value itself contains double quotes, it is necessary to use single quotes
  • American English states that use of double quotation marks ("")for direct quotes and titles, while single quotation marks ('')are used for quotes within a quote.
<size>
  • Set a width for an input field
<small>
<source>
  • View HTML Source code by right clicking on a web page .
  • Click CTRL + U in an HTML page,
  • Right click on the page and select "View Page Source"
  • Right click on an element or a blank area and choose "inspect" to see what elements are made up of.
  • Your may copy and paste, however you can not change anything or delete it.
  • Defines multiple media resources for media elements (<picture> <video> <audio>)
<span>
  • The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
  • The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
  • The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
<src >
  • All HTML elements can have attributes
  • Attributes usually come in name/value pairs like: name="value"
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag.
  • The src attribute specifies the path to the image to be displayed
<step>
  • The input stsep attribute specidies the legal number intervals for an input field
      • step="3" legal numbers could be -3,0,3,6
  • The step attrubute works with the following input types:
      • time and week
      month
      datetime-local
      date
      range
      number
  • The max and min attributes can work together to create a range of legal values
<style>
  • All HTML elements can have attributes
  • Attributes usually come in name/value pairs: name="value"
  • Attributes provide additional information about elements.
  • Attributes are always specified in the start tag
  • The style attribute is used to add styles to an element such as color.
  • Defines strike through text
  • Not supported in HTML5 Use <del> or <s> instead
<strong>
  • Defines important text
<sub>
  • A image that is aligned with the subscript baseline of the parent
<summary>
  • De finds a visible heading for a <details> element
<sup>
  • A image with a superscript base line of the parent
<svg>
  • Defines a container for SVG graphics
<table>
  • Defines a table
<target>
  • Defines where the new page will be loaded into when the link is clicked on.
<tbody>
  • Used to group the body content in an HTML table.
  • The <tbody> element is used in conjunction with the <thead> and <tfoot> elements
    •
<td>
  • Defines a cell in a table
<template>
  • Defines a container for content that should be hidden when the page loads
<textarea>
  • Defines a multiline input control (text area)
<text-top>
  • A image that is aligned with the top of the parent element's font.
<text-bottom>
  • A image that is aligned with the bottom of the parent element's font
<tfoot>
  • Used to group footer content in an HTML table
  • the element must have one or more <tr> tags inside.
  • It is used in conjunction with the <tbody> and <thead> elements to specify each part of a table (footer, body, header)
  • As a child of a table </thead></olgroup></caption>element the tfoot tag must follow after any <caption> , <colgroup> , <thead> , and <tbody> elements.
    The <tfoot> tag must be used in the following context:
  • As a child of a <table> element, after any <caption>, <colroup>, <thead> and <tbody> elements
  • By default the <thead>, <tbody>, <tfoot>, elements will not affect the layout of the table.
<th>
  • Defines a header cell in a table
<thead>
  • Used in conjunction with the <tbody>and<tfoot>elements to specify each part of a table (header, body, footer).
  • By default the <thead>, <tbody>, <tfoot> elements will not affect the layout of the table.
<time>
  • Defines a specific time (or datetime)
<title>
  • The <title> tag defines the title of the document.
  • The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
  • The character encoding declaration should always be the first element of the head section.
  • The <title> element is required and it doesn't matter where it is put in the <head> section as long as it is beneath the character encoding declaration (i.e. <meta charset='utf-8'> ).
  • The contents of a page title is very important for search engine optimization (SEO)!
  • The page title is used by search engine algorithms to decide the order when listing pages in search results.
  • The <title>element:
      • defines a title in the browser toolbar
      provides a title for the page when it is added to favorites
      displays a title for the page in search-engine results
<top>
  • A image that is aligned with the top of the tallest element on the line
<tr>
  • Defines a row in a table
<track>
  • A image that is aligned with the top of the tallest element on the line
  • Defines teletype text
  • Not supported in HTML5, use CSS instead
<u>
  • Defines an unordered list
<ul >
  • Defines an unordered (bulleted) list Tag with the <li> tag you create an unordered list. Added with the <ol> tag to concrete a ordered list
<value>
  • The input value attribute specifies an initial value for an input field
<var>
  • The <var> element defines a variable in programming or in a mathematical expression
<video>
  • Defines a video or movie
<width>
  • Attributes usually come in name/value pairs: name="value"
  • Attributes provide additional information about elements.
  • Attributes are always specified in the start tag
  • The <img> tag will also contain the height and width attributes which specify the height and width of the image in pixels.
  • Always specify the "border-style" property to set the borders first or the border width property will not work
  • The border-width property can have from one to four values (one for the top border, right border, bottom border, and the left border)
  • If you are placing different px for each border do not use : between them.
<wbr>
  • Defines a possible line-break