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 - 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
.htmfilename 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.
htmlelement:- Encloses the
headsection. - Encloses the
bodysection. headsection:- 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.
bodysection:- 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
<!--and end 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
ptag 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 textborder: 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 directoryroot→ root home directoryhome→ have all users- we have
rootandhomedirectory ( have users ) → for isolation ../→ going to the back level → one back level- if I have an image in
imgfolder andindex.htmlis inpagesfolder and I want to access the picture → path to write :../img/1.jpg, if 2 upper levels to access2.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
alignattribute. - The default alignment is left.
<img align="top" src="img.gif"> text </>top→ pic on left - one line upper of picture - rest text undermiddle→ pic on left → one line in middle of picture - rest text underbottom→ pic left → one line on bottom of picture - rest text underleft→ pic on left and the rest text from left to rightright→ 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
typeattribute 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
hrefattribute. - 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 theDeitelhomepage in a new browser window.- To create an email link, include
mailto:before the email address in thehrefattribute →<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
deltags is → struck out.. - Text placed between the
subtags is → subscripted. - Text placed between the
suptags 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 boldtd + 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 - centerwidth=200 - height=300bgcolor = 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&2style="background-color:red"→ CSS → style for thetaglevel ( 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 → cellscellpadding→ 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 columnrowspan→ 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.