Html Usage
- Front End
- Back End
- Report
<!DOCTYPE html>
This is not an html tag but it used to tell browser to render in standard mode not quirks mode
h1 - h6
It prefered that h1 must written only once to be friendly with search engine
<h1>Book Store</h1>
don't change hierarchy for example but h2 in h3
We use paragraph to make new line between elements it separete text in new lines because it's a block
<hr>
We use that to make lines between elements like Divider() in flutter
b => bold text
<b>Book Store</b>
strong => important text
<strong>Book Store</strong>
i => italic font
<i>Book Store</i>
em => emphasized text do what italic do
<em>Book Store</em>
mark => mark text or higlight it
<mark>Book Store</mark>
u => underline text
<u>Book Store</u>
small => make a smaller text
<small>Book Store</small>
del => deleted text search engine dosen't like text change and the site become not trusted so we but old text in del tag or we can use it with discounted price
<del>Book Store</del>
<p><del>100</del> 80</p>
ins => to tell user that text in new
<p><ins>100</ins> 80</p>
sub => subscript we use it like 2 in H2O
<p>H<sub>2</sub>O</p>
sup => superscript we use it like 10^2
<p>10<sup>2</sup></p>
<a href="#URL" target="_blank" title="#title" >#Text</a>
URl: url u want to go to - u can feed it with complete url - certin page in this website like about.html - go to certin element by its id like #id - go to email by type mailto:[email protected]
title: tooltip when u hover the link Text: apperaing text to user
target="_blank"
if exist the url will open in new page
<img src="book.png" alt="">
Alt text will show when image not exsist
li: list item
-
reversed: reverse list order
-
start: define where numbering start from
- we can define value in li element to start count from instead of defining start in ol element
-
type: type of numbering alphapet or number or romanic
dt: Term
dd: Term description
don't use table attrbutes
table : table element
caption: caption for table appear top of table
thead: table header
tbody: table body
tfoot: table foot
th: table head cell
td: table cell
tr: table row
<span></span>
span: used to hold words in paragraph to style it
<br>
br: break make new line
<hr>
hr: horizontal rule used to make lines
<div></div>
div: is used as a container in page
don't use div to hold a text use <p> insted
Entities used if u want to show reserved word in your text
<p> to show <pr>
and there is more and more
Semantic Elements : u can consider it like div but with a charctarestic name
<header>
<nav>
<section>
<main>
<footer>
<audio>
audio used to play sounds u can use source i
useful atterb
controls: to show audio controlsautoplay: auto play audio but this dosen't support in some browserloop: loop audiomuted: mute audio
u can use <source> in audio element instead of src
u can use many source with diffrent type and the browser will choose the MMETYPE it support
u can leave msg will show if the browser dosen't support any type
<video>
have same attrb as audio also have a
poster to show image until video laod
you can user <track> to add subtitles like that
<video controls>
<track srv="abc_en.vtt" kind="subtitles srclang="en" label="English">
</video>
<form></form>
-
to make froms in your website
-
put all related inputs in it
-
action
- the page data will be sent to
- if it empty or dosen't exsist data will be sent to current page
-
target="_blank"to send data in new page -
method
method="POST"send data but quiery param dosen't show in urlmethod="GET"send data but quiery param show in url
<label></label>
- to give somthing a label
for="##"connect label with element by id
<input>
- type
type="text"for most inputstype="search"like text but add a clear button to fieldtype="file"to uplaod filestype="url"to input urlstype="date"to input datetype="time"to input timetype="datetime"to input date and timetype="url"to input urlstype="password"for password fieldtype="email"for email fieldtype="submit"to submit data from fromtype="reset"to reset data in fromtype="color"to select color and get hash value of ittype="range"like slider- U can define min max step
type="number"to input number only- U can define min max step
type="list"to input urls- like select but searchable
-
<input type="list" name="prog" list="proglang"> <datalist id="proglang"> <option value="c#"> <option value="c++"> <option value="c"> </datalist>
-
required
- to mark your input as required
-
hidden
- to hide certin input but can be shown in inspector
-
value
- to put a default value
- if you use it with input with
type="submit"the button name will change
-
palceholder
- like lable put inside the filed
-
disabled
- the input greyed out and data won't be send
-
readonly
- non changing input but u can copy it and will be send
-
autofocus
- autofocus certin input
-
minlength
- to specify minimnum length of char for example password
-
maxlength
- to specify max length of char for example bio
-
novalidate
- to ignore validation
<select></select>
to select from multipule options
multipuleuser can select multipule options by click ctrl and select
<select id="nation">
<option value="EG">EGYPT</option>
<option value="UK">UNITED KINGDOM/option>
<option value="Ch">CHINES</option>
</select>
<option value="EG">EGYPT</option>
selectedto select the current optionvaluethe value which will be sent- u can add option tag inside
<optgroup></optgroup>- to classify your option and add
labelparam to optgroup to name the collection
- to classify your option and add
all inputs are self closed tag except <textarea></textarea>
<q>This quote</q>
- write quote between quotation
- inline element
<blockquote>This blockquote</blockquote>
- write quote with magin and some default style
- block element
<wbr>
line break opportunity
- break text
<bdi>
bidirectional isolation
- isolate elemet from page direction
- it useful when write mixed lang text
<p> <bdi>سلام</bdi> hello 2</p>
<p> سلام hello 2</p>
<code></code>
- to handle code and u can customize how it will be formatted
<pre></pre>
- pre formatted text all u write will display the same
<ifram></iframe>
- is used to include page from out source any url
- or from html page