HTML

"CSS"

JavaScript

Move your mouse down: Click on the blue square for a demonstration

INTRODUCTION TO HTML (Hyper Text Markup Language)

Intoduction

"what is html?"

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "This is a heading", "this is a paragraph", "this is a link", etc.

"simple_html_document"

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page which will show in the browser's title bar or in the page's tab.
The <body> element defines the document's body, is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading.
The <p> element defines a paragraph

"what_is_html_element?"

An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag

"nested_html_element"

An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag

"empty_elements"

Empty elements do not have an end tag

"page_structure"

With this page structure you see everything that is inside the html

Web Browsers (Safari, Firefox, Edge, and Chrome) purpose is to read HTML documents and display them correctly.
The browsers uses them to determine how to display the document, the browsers do not display the HTML tags

"HTML Display"

No one can be sure how HTML will be displayed.
When the page is displayed the browser will automatically remove any extra spaces and lines.

Block and Inline Elements

Block Elements

Block Element always starts on a new line
Always takes up the full width available (stretches out to the left and right as far as possible).

Defines contact information for the athoer/owner of a document

Defines an article

<aside>

The <aside> HTML element represents a section of content that is tangentially related to the main content of the page, often displayed as a sidebar or call-out box.
It's designed to house supplementary information that is not critical to the primary topic but can be useful to the user.

Defines a section that is quoted from another source

Used to draw graphics, on the fly, via scripting usually using JavaScript

<dd>

Defines a description/value of a term in a description list

<div>

Defines a section in a document

<dl>

Defines a description list

<dt>

Defines a term/name in a description list

Groups related elements in a form

Defines a caption for a <figure> element

Specifies self-contained content

Defines a footer for a document or section

<form>

Defines an HTML form for user input

Defines a header for a document or section

<hr>

Defines a thematic change in the content

<li>

Defines a list item

<main>

Specifies the main content of a document

<nav>

Defines a set of navigation links, intended only for major blocks of navigation links.

For users that do not support client-side scripts defines an alternate content

<ol>

Defines an ordered list

<p>

Defines a paragraph

<pre>

Defines preformatted text

Defines a section in a document.

<table>

Defines a table

<tfoot>

group the footer content in a table

<ul>

Defines an unordered list

<video>

TITLE: Specify a title for the video.
WIDTH (W): Enter the width in pixel of the video.
HEIGHT (H): Enter the height in pixel of the video.
CONTROLS: Select if you want to display the video controls such as Play, Pause, and Mute in the HTML page
AUTOPLAY: Select if you want the video to start playing as soon as it loads on the web page.
POSTER: Enter the location of the image you want displayed until the video completes downloading, or until the user clicks Play. The Width and Height values are auto-filled when you insert the image.
OOP: Select this option if you want the video to continuously play until the user stops playing the movie.

Inline Level Elements

An inline element cannot contain a block-level element and does not start on a new line
An inline element only takes up as much width as necessary

<a>

Defines a hyperlink

<abbr >

Defines an acronym or an abbreviation

"Mr.", "Dr.", "ASAP", "ATM", "HTML", "CSS".

Defines an acronym
Not supported in HTML5 Use &li;abbr>

<b >

Defines bold text with out making it important

<bdo >

Overrides the current text direction

<big >

Defines big text
Not supported in HTML5 Must use CSS

<br >

Has no ending tag.
Inserts a single line break

Defines a clickable button

<cite >

Defines the title of a creative work

a book,

a poem

a song,

a movie

a painting,

a sculpture,

Usually the text is in italic and not the name of the person.

<code >

Defines a peace of computer code

<dfn>

Stands for the "definition element"
Specifies a term that is going to be defined within the content
Tag must also contain the definition/explanation for the term.

<em >

Defines emphasized text
The content inside is typically displayed in italic.
Screen reader will pronounce the words in with an emphasis, using verbal stress.

<i>

Defines a part of text in an alternate voice or mood
Typically displayed in italic.
Often used to indicate a technical term,
Only use when there is not a more appropriate semantic element, such as:

< dnf >

< cite >

<mark >

< em >

<img >

Used to embed an image into a HTML page
Images are linked to web pages not technically inserted into a web page;
The tag creates a holding space for the referenced image which has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

Defines an input control

<kbd >

Defines keyboard input

Defines a label for an <input> element

<map >

Defines an image map

Defines a container for an external application

Defines the result of a calculation

<q >

Defines a short quotation

<samp >

Defines sample output from a computer program

Defines a client-side script

The <select > element is used to create a drop-down list
The <select > element is most often used in a form, to collect user input.
The <option > tags inside the <select > element define the available options in the drop-down list.

Defines smaller text.

<span >

Defines a section in a document

Defines important text

<sub >

Defines subscripted text

<sup >

Defines superscripted text

Defines a multiline input control (text area)

<time >

Defines a specific time (or datetime)

<tt >

Defines a specific time (or datetime)

<var >

Defines a variable

HTML Tables

Add Borders

To add a border, use the CSS border property on table, th, and td elements

Align Table Headers

Defines a header cell in a table

To make the cell to become a header cell change <td> to <th>

The text in <th> elements are centered and bold by default, you can change it with css

Border Colors

Use the border-color property to set the color of the borders

Caption

Defines a table caption

Top or bottom of table

The <caption> tag should be inserted immediately after the <talbe> tag

Cell Padding

Cell padding is the space between the cell edges and the cell content

The padding is set to 0 by default.

Use the CSS padding property to add padding on table cells

Cell Spacing

Cell spacing is the space between each cell

The space is set to 2 pixels by default

To change the space between table cells use the CSS border-spacing property on the table element.

col

Specifies column properties for each column within a <colgroup> element
The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell and/or row
The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead><tbody><tfoot>and <tr> elements

collapse Border

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Another way of showing it is to make all the borders the same color as the background.

Colspan

Colspan is used to have table cells span over multiple columns

Combine Vertical-Horizontal Zebra Stripes

Use this to have stripes on every other row and every other column.

Use a tranparent color you will get an overlapping effect

Dotted borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

dashed

inset

groove

outset

dotted

solid

double

ridge

none

hidden

Invisible-border

Make your borders the same color as your background.

Make border: none;

Round Borders

Using the border-radius property, the borders get rounded corners

Rowspan

To make a cell span over multiple rows, we use the rowspan attribute

table

Defines a table that allow web developers to arrange data into rows and columns

Table Cells

td stands for table data

Defines a cell in a table

Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element

Table Data

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size.

Table Headers

Defines a header cell in a table

To make the cell to become a header cell change <td> to <th>

The text in <th> elements are centered and bold by default, you can change it with css

Table Rows

Defines a row in a table

Table rows start with the <tr> and ends with the </tr> tag.

As many rows as you need or want can go into a table

Table Rows Height

Defines the height of a row in a table

Table rows start with the <tr> and ends with the </tr> tag.

To set the height of a specific row, add the style attribute on a table row element:

Table Column Width

To set the size of a specific coulmn add the style attribue on a <th> or <td> element.

Table: Centering

To place a table in the center of page with space on left and right

Tables: side by side

Two tables placed side by side

Vertical Table Headers

Define the first cell in each row as a <th> element to use the first column as table headers.

Defines a header cell in a table

To make the cell to become a header cell change <td> to <th>

The text in <th> elements are centered and bold by default, you can change it with css

Table headers are defined with th elements, Each th element represents a table cell

HTML tables can have headers for each column or row.

Vertical Zebra Stripes

To make vertical zebra stripes, style ever other column, instead of every other row.

Set the :nth-child-=() selector on both th and td elements if you want to have the styling on both headers and regular table cells.

Zebra Stripes

Use the :nth-child(even) to style every other table row elements

Use the :nth-child(odd) to style every other odd table row elements

Nested Table

A table inside another table.

Comparsion Table

A visual tool is a comparison table that orginizes options into colums and their attributes into rows, making it easy to compare features side-by-side.

It's used for making informed decisions about services, products, or features by laying out in a clear, structued format their key details.

The table allows for a quick comparison of multiple choices based on specific characteristics.

Responsive-Table

Responsive web design adjust your web page so it looks good on all devices .

Only HTML and CSS is used on Responsive web design.

Responsive web design is not a program

Using many different devices: desktops, tablets, and phones can be used to view the web page.

Web pages doest not leave out information to fit smaller devices, but rather adapt its content to fit any device: screen

When you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen it is called responsive web design.

<thead>

The <thead> tag is used to group header content in an HTML table.

The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

You must have one or more <tr> tags inside the <thead> element

The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption> and <colgroup> elements, and before any <tbody>tfoot>, and <tr> elements.

By default the <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table

<tbody>

The <tbody> tag, on the other hand, specifically defines the body content (a group of data rows) within an HTML <table> element. It is used in conjunction with <thead> (table header) and <tfoot> (table footer) to provide semantic structure to a table.

The <tbody> element in HTML represents the main body content of an HTML table.

It is used in conjunction with the <thead>
(table header) and <tfoot> (table footer) elements to provide semantic structure and organization to table data.

<tfoot>

In an HTML table the <tfoot> tag is used to group footer content

The <tfoot> element is used in conjunction with the <tbody> and <thead> elements to specify each part of a table (header, body, footer)

The browsers can use these elements to enable scrolling of the table body indepently of the footer and header.

These elements can enable the table header and footer to be printed at the top and bottom of each page when printing a large table that spans multiple pages.

You must have one or more <tr> tags inside the <tfoot> element.

As a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements is how the <tfoot> tag must be used.

Must use CSS to affect the layour of the table becasue by default the <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table..

Horizonal Dividers

Horizontal dividers in HTML are primarily created using the <hr> tag, which stands for "horizontal rule" or "thematic break." This element is used to visually separate content sections or indicate a change in topic within a document.

Hoverable Table

A hoverable border is a visual effect in web design where an element's border changes when a user hovers their mouse over it,
Created using the :hover pseudo-class in CSS.
You define the initial border styles for the element, with using a :hover rule to change the border's width, style, or color when the mouse pointer is over it. When adding a transition property to the element's initial style makes the change appear smoothly.