summary web programming HTML-P1 chapters (2.1,2.2)

HTML introduction

HTML → Hyper Text Markup Language.
An HTML file is a text file containing:

Markup language specifies the structure and content of documents that are displayed in web browsers.
An HTML file must have an ~~htm~~ or html file extension.
An HTML file can be created using a simple text editor.

interpreter → line by line execution
complier → execution as a whole code ( the give me a file code )

create HTML documents

typing HTML5 markup text in a text editor (Text Pad, notepad)
saving it with the .html or .htm filename extension.

computer store HTML5 documents → called web servers
Clients (such as web browsers running on your local computer or smartphone) request specific resources such as HTML5 documents from web servers.

<!DOCTYPE> Declaration

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The <!DOCTYPE> declaration helps the browser to → display a web page correctly.
There are different document types on the web.
To display a document correctly → the browser must know both the type and version.
The doctype declaration is not case sensitive. All cases are acceptable.
A <!DOCTYPE> declaration in HTML specifies the document type and version, ensuring proper rendering and compatibility

it not a tag it’s a declaration
even if we didn’t use it will work

Common Declarations

HTML5 <!DOCTYPE html> → just this one to study
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd"›
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">

HTML code

<html >
 <head>
 <title>Internet and WWW How to Program - Welcome</title>
 </head>

 <body>
 <p>Welcome to XHTML!</p>
 </body>
 </html>

HTML markup:

Contains text (and images, graphics, animations, audios, and videos) that represent the content of a document.
Includes elements that specify a document's structure and meaning.

html element:

Encloses the head section.
Encloses the body section.

head section:

Contains information about the HTML document.

Character set (UTF-8, the most popular character-encoding scheme for the web) → Helps the browser determine how to render the content.
Title→ The text between the title tags appears as the title of the web page <title>Internet and WWW How to Program - Welcome</title>

Can also contain:

Special document-formatting instructions called CSS3 style sheets.
Client-side programs called scripts for creating dynamic web pages.

body section:

Contains the page's content.
Displayed by the browser when the user visits the web page.
Elements between the body tags of the HTML document appear in the body of the web page.

comments

improve readability and describe → the content of a document
The browser ignores comments when your document is rendered.
Comments start with .

start - end tags

HTML5 documents:

Delimit most elements with a start tag and an end tag.
Utilize start tags with the element name enclosed in angle brackets <html>.
Employ end tags with the element name preceded by a forward slash (/) in angle brackets </html>.

Void elements:

Do not have end tags.
Many void elements are self-closed.

Start tags with attributes:

Many start tags have attributes that provide additional information about an element.
Browsers use these attributes to determine how to process the element.
Each attribute consists of a name and a value separated by an equals sign (=).

Case sensitivity in HTML5:

HTML5 element and attribute names are case-insensitive.

You can use uppercase and lowercase letters.

good practice → to use only lowercase letters.

Title Element

Considered a nested element → Enclosed within the start and end tags of the head element.
Purpose of the Title Element:

Describes the web page.
Typically appears in:

The title bar → at the top of the browser window.
in The browser tab where the page is displayed.

Importance for Search Engines:

Search engines use the title for → indexing purposes, displaying search results.

Paragraph Element

<p>...</p>
All text placed between the <p> and </p> tags forms one paragraph.
the attributes of the tag will be in the p tag as → <p attribute=”value” > → <p align="left">welcome to hell .... </p>

HTML Text Formatting

<b>: Defines bold text
<big>: Defines big text
<em>: Defines emphasized text → italicized
<i>: Defines italic text
<small>: Defines small text
<strong>: Defines strong text → bold text
<sub>: Defines subscript text
<sup>: Defines superscript text
<del>: Defines deleted text
<bdo>: Defines the text direction
<u>: Defines underlined text
<hr>: Defines a horizontal rule

The horizontal rule element renders a → horizontal line on the web page

<h1>...<h6>: Defines header text
<br> tag is used to create a line break within the text or content of a webpage

Headings

HTML provides six heading elements: h1 through h6.
These elements are used for → specifying the relative importance of information.
Heading Hierarchy:

Heading element h1 is the most significant, the largest font.
Each successive heading element (h2, h3, etc.) is rendered in a progressively smaller font.

by default size = 3, <small> = 1, <big> = 5 ( bigger than default )
size in HTML → from 1 to 7

if I put 0 = 1 , 8 = 7 , 9 = 7

`br>` tag

<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.
<p>This is<br>a paragraph<br>with line breaks.</p> → each on a new line but the same paragraph
line break will render an → empty line on a web page

`<font> tag`

<font> Element:
Defines font attributes :

Attribute: size→ Ranges from 1 to 7, or you can use + and - with the default font size "3" <font size="+6"> text </font>

Centering<center> text </center>
Aligning → Attribute: align, Options: left, right, center→ <p align="left"> this is the left side </p>
one mistake in writing the font type will go back to the default → no error generated
more than one word → put in quotation
<font> color = RRGGBB face=arial size=7 </font> - face → type of font

Placing image on web page

Tag: <img>: Defines an image, <img>: Doesn't have a closing tag.
Attributes:

src: Defines the image file location.

<img src="[image_name].[type]">

Picture types: GIF, JPG, BMP, PNG
The picture and the page .html.

width: Specifies the image width.
height: Specifies the image height.
alt: Provides a description of the image. Displayed if the image cannot be shown. → alt → alternative text
border: Defines the image border width.
align: Defines the placement side of the image (default is left).

relative path vs absolute path

A relative path → describes the location of a file relative to the current (working) directory.

<img src="images/pic.jpg”

An absolute path → describes the location from the ( system root directory )

Linux → /
windows → C:\

A relative path is more flexible than an absolute path because it remains functional even when the main page directory is relocated, while an absolute path would fail in such cases.
/ → system root directory
root → root home directory
home → have all users

we have root and home directory ( have users ) → for isolation

../ → going to the back level → one back level

if I have an image in img folder and index.html is in pages folder and I want to access the picture → path to write : ../img/1.jpg, if 2 upper levels to access 2.jpg → ../../2.jpg

Aligning text with images

The <img> element is an inline element.

It does not insert a new line on a page.
Text and other elements can wrap around it.

It's useful to specify the alignment of the image according to surrounding elements.

This is achieved using the align attribute.
The default alignment is left.

<img align="top" src="img.gif"> text </>

top → pic on left - one line upper of picture - rest text under
middle → pic on left → one line in middle of picture - rest text under
bottom → pic left → one line on bottom of picture - rest text under
left → pic on left and the rest text from left to right
right → pic on the right and the rest text from left to right

`<marquee>` Tag

<marquee>: By default, scrolls from right to left.
<marquee bgcolor="pink" direction="right" behavior="scroll">isra university</marquee>
Attributes:

behavior: Specifies the scrolling behavior (alternate, scroll, slide).
direction: Defines the direction of the marquee (right, left, down, up).
scroll amount: Sets the number of pixels to jump on each scroll (default is 6 pixels).
scroll delay: Determines the time between each jump (default is 85 milliseconds).

Larger value → slower scrolling.
Smaller value → faster scrolling.

bgcolor: Defines the background color <marquee bgcolor="green">

RGB Color in Hex:

RRGGBB format with six values (00 00 FF).
FF FF FF represents white.
00 00 00 represents black.

Ordered and Unordered List

Ordered List (OL):

Creates a list in which items begin with a number or letter.
Tag: <ol> </ol>

Unordered List (UL):

Does not order its items by letters or numbers.
Tag: <ul> </ul>

List Items (LI):

Defines individual items in a list → entry in the list must be placed between the <li> and </li> tags
Tag: <li> </li>

type: Specifies the type of ordering or unordered list → in the order or unorder list tag

unorder lists → (circle, square, disk) → by default bullet
order list → (roman numerals, letters and numbers) → <ol type = "a"> → by default number

By inserting a list as an entry in another list, lists can be → nested.
The type attribute of the ordered list element allows you to select a → sequence type to order the list.

Linking

<a>: Defines an anchor, used to create a link.
Attributes:

href: Specifies the address of the document to link to.
target: Defines where the linked document will be opened.

Linking in HTML :

Accomplished with the anchor (<a>) element.
The text between the <a> tags serves as the → anchor for the link.
The anchor links to the page specified by → the href attribute.

Styling Elements with <p> Tags:

Elements placed between <p> tags will be set apart from other elements on the page by a → vertical line will appear before and after the content.

<a href = "http://www.deitel.com">Deitel</a> → Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.
To create an email link, include mailto: before the email address in the href attribute → <a href = "mailto:deitel@deitel.com"> deitel@deitel.com </a> → When a user clicks on an email link, an email message addressed to the value of the link will open up
Placing an image element between anchor tags, creates an image that is an anchor for a link → works exactly the same as using text.

Character Entities

Special characters are denoted with an ampersand (&) and an abbreviation for that character
 : Non-breaking space (Space)
<: Less than (<)

Used to avoid conflicts with the HTML tags < and >.

>: Greater than (>)
&: Ampersand (&)
&qout;: Quotation mark (“) [Note: The correct entity is "]
&apost;: Apostrophe (‘) [Note: The correct entity is ']
©: Copyright (©)
note → the semicolon is optional.

`del` - `sub` - `sup`

Text placed between del tags is → struck out..
Text placed between the sub tags is → subscripted.
Text placed between the sup tags is → superscripted.

HTML Tables

Tables → represent tabular data.
A table → consists of one or several rows.
Each row → has one or more columns.
Tables are comprised of several core HTML tags:

<table></table>: begin and end the table.
<tr></tr>: create a table row.
<td></td>: create tabular data (cell).

example as : <table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>

table with 3 rows and each row with 2 cells
between the <td></td> we put any thing → URL - TEXT - IMAGE - NUM

Tables should not be used for layout purposes.
Instead, use CSS floats and positioning styles for layout design.
the first cell for the row to be distinct and differentiate

<tr><td><center><b>Sr.No</b></center></td><td></td></tr>
<td><center><b>Sr.No</b></center><td> = <th>Sr.No</th> → will give the same result center and bold

td + b + center = th

we make by default the first row to be bold and center
to see the table → the border should be = 1 or align or widths - height or bgcolor → either wise we won’t see it
attributes to use with table :

<table bordder = 1 >
align = left - right - center
width=200 - height=300
bgcolor = red

<td> → default is align left
<th> → default is to align center

Complete HTML Tables

split row into several semantic sections:

<thead> → table header and contains <th> elements instead of <td> cells.

if I move the header to the last line it will be by default the first line for the tags we define it with → the same for the body and the footer

<tbody> → a collection of table rows holding table data.
<tfoot> → the table footer and may come before the <tbody> elements but is displayed last.

<colgroup> and <col> are used to → define columns and assign column widths.

<colgroup> <col span=“2" style="background-color:red"> </colgroup>
if we want to color a column we will add → <colgroup> </colgroup> for every column
col span=“2" → two columns 1&2
style="background-color:red" → CSS → style for the tag level ( inline cascading slash sheet )

Nested Tables

Table cells (<td>) can contain nested tables → tables within tables <table> in <td>

Cell Spacing and Padding

Tables have two attributes related to space

cellspacing → Defines the empty space between → cells
cellpadding → Defines the empty space around the → cell content

<table cellspacing="15" cellpadding="0"> </table

Column and Row Span

Cells <td> have two attributes related to merging
colspan - rowspan → attributes for <td>
colspan → combination at the column level → <td colspan = 3> → combination of three cells is a column
rowspan → combination at the row level → <td rowspan = 3 > → combination of three cells in a row

<table>
<tr><td columnspan = 4></td></tr>
<tr><td rowspan = 3></td><td></td><td></td><td></td></tr>
</table>

<td> attributes then <tr> attributes then default attribute

if table → red and cell → green → then the cell will be green → we will get the smaller one

extra notes to remember in the basics for HTML

see page source code HTML → can’t be edited

inspect - view page source

colors

Color Names: You can use named colors like "red," "blue," or "green" to specify the color.
Hexadecimal Color Codes: Use a six-character code starting with "#" to define colors, like "#FF0000" for red.

<br> tag is used to create a line break within the text or content of a webpage
color picker → https://www.w3schools.com/colors/colors_picker.asp
<strong> = <b> → they give bold text
<hr>, <br> → they don’t have a closing tag
<h1> … </h1> → by default will generate a new line - bold - and bigger or smaller line
<bdo> → alone won’t make any change

it will be used to affect using it’s attributes dir=ltr , rtl

ltr : left to right - rtl : right to left → <bdo dir=rtl>welcome to jordan</bdo><br>

spaces won’t affect → multi spaces = one space only

<bdo dir=ltr>welco me to jorda n</bdo><br> → welco me to jorda n

table information tags summary

HTML Tables:

Defined by <table>, <tr>, <td> tags.

Semantic Tags for Tables:

<thead>: Represents the header section of a table.
<tbody>: Represents the body section of a table.
<tfoot>: Represents the footer section of a table.

Columns:

<colgroup>: Groups a set of <col> elements for column styling.
<col>: Defines attributes for table columns.
<th>: Represents table header cells, typically bold and centered.

Column/Row Span:

colspan: Specifies the number of columns a cell should span.
rowspan: Specifies the number of rows a cell should span.

Styling Tables:

Prefer CSS for styling tables.
Old tags for styling tables (not recommended in modern web development):

cellspacing: Specifies the space between table cells.
cellpadding: Specifies the space between cell content and cell borders.
border: Specifies the table border.

HTML introduction

HTML → Hyper Text Markup Language.
An HTML file is a text file containing:

Markup language specifies the structure and content of documents that are displayed in web browsers.
An HTML file must have an ~~htm~~ or html file extension.
An HTML file can be created using a simple text editor.

interpreter → line by line execution
complier → execution as a whole code ( the give me a file code )

create HTML documents

typing HTML5 markup text in a text editor (Text Pad, notepad)
saving it with the .html or .htm filename extension.

computer store HTML5 documents → called web servers
Clients (such as web browsers running on your local computer or smartphone) request specific resources such as HTML5 documents from web servers.

<!DOCTYPE> Declaration

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The <!DOCTYPE> declaration helps the browser to → display a web page correctly.
There are different document types on the web.
To display a document correctly → the browser must know both the type and version.
The doctype declaration is not case sensitive. All cases are acceptable.
A <!DOCTYPE> declaration in HTML specifies the document type and version, ensuring proper rendering and compatibility

it not a tag it’s a declaration
even if we didn’t use it will work

Common Declarations

HTML5 <!DOCTYPE html> → just this one to study
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd"›
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">

HTML code

<html >
 <head>
 <title>Internet and WWW How to Program - Welcome</title>
 </head>

 <body>
 <p>Welcome to XHTML!</p>
 </body>
 </html>

HTML markup:

Contains text (and images, graphics, animations, audios, and videos) that represent the content of a document.
Includes elements that specify a document's structure and meaning.

html element:

Encloses the head section.
Encloses the body section.

head section:

Contains information about the HTML document.

Character set (UTF-8, the most popular character-encoding scheme for the web) → Helps the browser determine how to render the content.
Title→ The text between the title tags appears as the title of the web page <title>Internet and WWW How to Program - Welcome</title>

Can also contain:

Special document-formatting instructions called CSS3 style sheets.
Client-side programs called scripts for creating dynamic web pages.

body section:

Contains the page's content.
Displayed by the browser when the user visits the web page.
Elements between the body tags of the HTML document appear in the body of the web page.

comments

improve readability and describe → the content of a document
The browser ignores comments when your document is rendered.
Comments start with .

start - end tags

HTML5 documents:

Delimit most elements with a start tag and an end tag.
Utilize start tags with the element name enclosed in angle brackets <html>.
Employ end tags with the element name preceded by a forward slash (/) in angle brackets </html>.

Void elements:

Do not have end tags.
Many void elements are self-closed.

Start tags with attributes:

Many start tags have attributes that provide additional information about an element.
Browsers use these attributes to determine how to process the element.
Each attribute consists of a name and a value separated by an equals sign (=).

Case sensitivity in HTML5:

HTML5 element and attribute names are case-insensitive.

You can use uppercase and lowercase letters.

good practice → to use only lowercase letters.

Title Element

Considered a nested element → Enclosed within the start and end tags of the head element.
Purpose of the Title Element:

Describes the web page.
Typically appears in:

The title bar → at the top of the browser window.
in The browser tab where the page is displayed.

Importance for Search Engines:

Search engines use the title for → indexing purposes, displaying search results.

Paragraph Element

<p>...</p>
All text placed between the <p> and </p> tags forms one paragraph.
the attributes of the tag will be in the p tag as → <p attribute=”value” > → <p align="left">welcome to hell .... </p>

HTML Text Formatting

<b>: Defines bold text
<big>: Defines big text
<em>: Defines emphasized text → italicized
<i>: Defines italic text
<small>: Defines small text
<strong>: Defines strong text → bold text
<sub>: Defines subscript text
<sup>: Defines superscript text
<del>: Defines deleted text
<bdo>: Defines the text direction
<u>: Defines underlined text
<hr>: Defines a horizontal rule

The horizontal rule element renders a → horizontal line on the web page

<h1>...<h6>: Defines header text
<br> tag is used to create a line break within the text or content of a webpage

Headings

HTML provides six heading elements: h1 through h6.
These elements are used for → specifying the relative importance of information.
Heading Hierarchy:

Heading element h1 is the most significant, the largest font.
Each successive heading element (h2, h3, etc.) is rendered in a progressively smaller font.

by default size = 3, <small> = 1, <big> = 5 ( bigger than default )
size in HTML → from 1 to 7

if I put 0 = 1 , 8 = 7 , 9 = 7

`br>` tag

<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.
<p>This is<br>a paragraph<br>with line breaks.</p> → each on a new line but the same paragraph
line break will render an → empty line on a web page

`<font> tag`

<font> Element:
Defines font attributes :

Attribute: size→ Ranges from 1 to 7, or you can use + and - with the default font size "3" <font size="+6"> text </font>

Centering<center> text </center>
Aligning → Attribute: align, Options: left, right, center→ <p align="left"> this is the left side </p>
one mistake in writing the font type will go back to the default → no error generated
more than one word → put in quotation
<font> color = RRGGBB face=arial size=7 </font> - face → type of font

Placing image on web page

Tag: <img>: Defines an image, <img>: Doesn't have a closing tag.
Attributes:

src: Defines the image file location.

<img src="[image_name].[type]">

Picture types: GIF, JPG, BMP, PNG
The picture and the page .html.

width: Specifies the image width.
height: Specifies the image height.
alt: Provides a description of the image. Displayed if the image cannot be shown. → alt → alternative text
border: Defines the image border width.
align: Defines the placement side of the image (default is left).

relative path vs absolute path

A relative path → describes the location of a file relative to the current (working) directory.

<img src="images/pic.jpg”

An absolute path → describes the location from the ( system root directory )

Linux → /
windows → C:\

A relative path is more flexible than an absolute path because it remains functional even when the main page directory is relocated, while an absolute path would fail in such cases.
/ → system root directory
root → root home directory
home → have all users

we have root and home directory ( have users ) → for isolation

../ → going to the back level → one back level

if I have an image in img folder and index.html is in pages folder and I want to access the picture → path to write : ../img/1.jpg, if 2 upper levels to access 2.jpg → ../../2.jpg

Aligning text with images

The <img> element is an inline element.

It does not insert a new line on a page.
Text and other elements can wrap around it.

It's useful to specify the alignment of the image according to surrounding elements.

This is achieved using the align attribute.
The default alignment is left.

<img align="top" src="img.gif"> text </>

top → pic on left - one line upper of picture - rest text under
middle → pic on left → one line in middle of picture - rest text under
bottom → pic left → one line on bottom of picture - rest text under
left → pic on left and the rest text from left to right
right → pic on the right and the rest text from left to right

`<marquee>` Tag

<marquee>: By default, scrolls from right to left.
<marquee bgcolor="pink" direction="right" behavior="scroll">isra university</marquee>
Attributes:

behavior: Specifies the scrolling behavior (alternate, scroll, slide).
direction: Defines the direction of the marquee (right, left, down, up).
scroll amount: Sets the number of pixels to jump on each scroll (default is 6 pixels).
scroll delay: Determines the time between each jump (default is 85 milliseconds).

Larger value → slower scrolling.
Smaller value → faster scrolling.

bgcolor: Defines the background color <marquee bgcolor="green">

RGB Color in Hex:

RRGGBB format with six values (00 00 FF).
FF FF FF represents white.
00 00 00 represents black.

Ordered and Unordered List

Ordered List (OL):

Creates a list in which items begin with a number or letter.
Tag: <ol> </ol>

Unordered List (UL):

Does not order its items by letters or numbers.
Tag: <ul> </ul>

List Items (LI):

Defines individual items in a list → entry in the list must be placed between the <li> and </li> tags
Tag: <li> </li>

type: Specifies the type of ordering or unordered list → in the order or unorder list tag

unorder lists → (circle, square, disk) → by default bullet
order list → (roman numerals, letters and numbers) → <ol type = "a"> → by default number

By inserting a list as an entry in another list, lists can be → nested.
The type attribute of the ordered list element allows you to select a → sequence type to order the list.

Linking

<a>: Defines an anchor, used to create a link.
Attributes:

href: Specifies the address of the document to link to.
target: Defines where the linked document will be opened.

Linking in HTML :

Accomplished with the anchor (<a>) element.
The text between the <a> tags serves as the → anchor for the link.
The anchor links to the page specified by → the href attribute.

Styling Elements with <p> Tags:

Elements placed between <p> tags will be set apart from other elements on the page by a → vertical line will appear before and after the content.

<a href = "http://www.deitel.com">Deitel</a> → Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.
To create an email link, include mailto: before the email address in the href attribute → <a href = "mailto:deitel@deitel.com"> deitel@deitel.com </a> → When a user clicks on an email link, an email message addressed to the value of the link will open up
Placing an image element between anchor tags, creates an image that is an anchor for a link → works exactly the same as using text.

Character Entities

Special characters are denoted with an ampersand (&) and an abbreviation for that character
 : Non-breaking space (Space)
<: Less than (<)

Used to avoid conflicts with the HTML tags < and >.

>: Greater than (>)
&: Ampersand (&)
&qout;: Quotation mark (“) [Note: The correct entity is "]
&apost;: Apostrophe (‘) [Note: The correct entity is ']
note → the semicolon is optional.

`del` - `sub` - `sup`

Text placed between del tags is → struck out..
Text placed between the sub tags is → subscripted.
Text placed between the sup tags is → superscripted.

HTML Tables

Tables → represent tabular data.
A table → consists of one or several rows.
Each row → has one or more columns.
Tables are comprised of several core HTML tags:

<table></table>: begin and end the table.
<tr></tr>: create a table row.
<td></td>: create tabular data (cell).

example as : <table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>

table with 3 rows and each row with 2 cells
between the <td></td> we put any thing → URL - TEXT - IMAGE - NUM

Tables should not be used for layout purposes.
Instead, use CSS floats and positioning styles for layout design.
the first cell for the row to be distinct and differentiate

<tr><td><center><b>Sr.No</b></center></td><td></td></tr>
<td><center><b>Sr.No</b></center><td> = <th>Sr.No</th> → will give the same result center and bold

td + b + center = th

we make by default the first row to be bold and center
to see the table → the border should be = 1 or align or widths - height or bgcolor → either wise we won’t see it
attributes to use with table :

<table bordder = 1 >
align = left - right - center
width=200 - height=300
bgcolor = red

<td> → default is align left
<th> → default is to align center

Complete HTML Tables

split row into several semantic sections:

<thead> → table header and contains <th> elements instead of <td> cells.

if I move the header to the last line it will be by default the first line for the tags we define it with → the same for the body and the footer

<tbody> → a collection of table rows holding table data.
<tfoot> → the table footer and may come before the <tbody> elements but is displayed last.

<colgroup> and <col> are used to → define columns and assign column widths.

<colgroup> <col span=“2" style="background-color:red"> </colgroup>
if we want to color a column we will add → <colgroup> </colgroup> for every column
col span=“2" → two columns 1&2
style="background-color:red" → CSS → style for the tag level ( inline cascading slash sheet )

Nested Tables

Table cells (<td>) can contain nested tables → tables within tables <table> in <td>

Cell Spacing and Padding

Tables have two attributes related to space

cellspacing → Defines the empty space between → cells
cellpadding → Defines the empty space around the → cell content

<table cellspacing="15" cellpadding="0"> </table

Column and Row Span

Cells <td> have two attributes related to merging
colspan - rowspan → attributes for <td>
colspan → combination at the column level → <td colspan = 3> → combination of three cells is a column
rowspan → combination at the row level → <td rowspan = 3 > → combination of three cells in a row

<table>
<tr><td columnspan = 4></td></tr>
<tr><td rowspan = 3></td><td></td><td></td><td></td></tr>
</table>

<td> attributes then <tr> attributes then default attribute

if table → red and cell → green → then the cell will be green → we will get the smaller one

extra notes to remember in the basics for HTML

see page source code HTML → can’t be edited

inspect - view page source

colors

Color Names: You can use named colors like "red," "blue," or "green" to specify the color.
Hexadecimal Color Codes: Use a six-character code starting with "#" to define colors, like "#FF0000" for red.

<br> tag is used to create a line break within the text or content of a webpage
color picker → https://www.w3schools.com/colors/colors_picker.asp
<strong> = <b> → they give bold text
<hr>, <br> → they don’t have a closing tag
<h1> … </h1> → by default will generate a new line - bold - and bigger or smaller line
<bdo> → alone won’t make any change

it will be used to affect using it’s attributes dir=ltr , rtl

ltr : left to right - rtl : right to left → <bdo dir=rtl>welcome to jordan</bdo><br>

spaces won’t affect → multi spaces = one space only

<bdo dir=ltr>welco me to jorda n</bdo><br> → welco me to jorda n

table information tags summary

HTML Tables:

Defined by <table>, <tr>, <td> tags.

Semantic Tags for Tables:

<thead>: Represents the header section of a table.
<tbody>: Represents the body section of a table.
<tfoot>: Represents the footer section of a table.

Columns:

<colgroup>: Groups a set of <col> elements for column styling.
<col>: Defines attributes for table columns.
<th>: Represents table header cells, typically bold and centered.

Column/Row Span:

colspan: Specifies the number of columns a cell should span.
rowspan: Specifies the number of rows a cell should span.

Styling Tables:

Prefer CSS for styling tables.
Old tags for styling tables (not recommended in modern web development):

cellspacing: Specifies the space between table cells.
cellpadding: Specifies the space between cell content and cell borders.
border: Specifies the table border.

summary web programming HTML-P1 chapters (2.1,2.2)

HTML introduction

<!DOCTYPE> Declaration

HTML code

comments

start - end tags

Title Element

Paragraph Element

HTML Text Formatting

Headings

br> tag

<font> tag

Placing image on web page

relative path vs absolute path

Aligning text with images

<marquee> Tag

Ordered and Unordered List

Linking

Character Entities

del - sub - sup

HTML Tables

Complete HTML Tables

Nested Tables

Cell Spacing and Padding

Column and Row Span

extra notes to remember in the basics for HTML

table information tags summary

summary web programming HTML-P1 chapters (2.1,2.2)

HTML introduction

<!DOCTYPE> Declaration

HTML code

comments

start - end tags

Title Element

Paragraph Element

HTML Text Formatting

Headings

br> tag

<font> tag

Placing image on web page

relative path vs absolute path

Aligning text with images

<marquee> Tag

Ordered and Unordered List

Linking

Character Entities

del - sub - sup

HTML Tables

Complete HTML Tables

Nested Tables

Cell Spacing and Padding

Column and Row Span

extra notes to remember in the basics for HTML

table information tags summary

`br>` tag

`<font> tag`

`<marquee>` Tag

`del` - `sub` - `sup`

`br>` tag

`<font> tag`

`<marquee>` Tag

`del` - `sub` - `sup`