You are on page 1of 2

html - metal car

css - colour and design


javascript - engine(brain)

to go to live server press ctrl+s and then alt tab


loren(any number) is used to type sentences containing as many words as specififed after lorem
<!> emmet and then u will get basic format (also known as boiler plate)
for title in head section the text u write will be displayed on the top of the tab
<tags start> and </tags close>
head consists of meta,title and atachments
body consisits of main paragraph
<h1> heading ( of 6 types from h1 to h6 ) (Use only 1)
<p> </P> used for paragraph
.html is the extension used
to add notes press ctrl+/
it is case insensitive language
<b> </b> this is bold tag ( u can also use strong instead for bold )
<i> <i/> this is italic tag
<u> </u> this is underline tag
<sub> this </sub> is subscript
<sup> this </sup> is superscript tag
<hr> tag is used to add horizontal ruler
<pre> </pre> is used to print the text as it is as we type in html as with extra spaces and new line
<div> </div> is often used as a container for other elements (AS it is a block elements it always takes full
width)
<span> is an inline container
<video src="vansh.mp4"> Error </video> is used to play video (We can autoplay or loop video as well)
<br> used to create line breaks (added at end of line once to enter next line)
to add link - <a href = "https://sitelink.com">Text to be displayed to redirect to site</a>
if we want the link to open in a new tab then after link type target="_blank"
for pasting internal link first type /
a ,body, head are the tags and the words that follow them are attributes whcich add special meaning to ta
gs
to insert images - <img src="url of the source" alt="message if image not displayed"> (can be used for wid
th and hieght but not recommended)
There are two type of lists - 1) ul(unordered list) & 2) ol(ordered list)
for 1st u get dots, circles,squares and for ordered u get numbers,small and big alphabets,roman numbers
etc
<ul type="shape">
<li>first list item</li>
<li>seconf</li>
</ul>
for ol just replce ul by ol
u can even get nested lists by typing 1 list in 1 itself
for table first give heading by <h> (To get the format correct after typing full code right click and press for
mat)
then <table>
<thead> (Head is used for typing rows)
<tr>
<th>name</th>
<th>employee id</th>
<th>employee role</th>
</tr>
</thead>
<tbody> (Body is used for typing data in the rows(Data gets fillef in rows first then cloumn so write sleepin
g data)
<tr>
<td>harry</td>
<td>12345</td>
<td>ssoftware enginner</td>
</tr>
</tbody>
</table>
to move a single line down select the line and then press alt+down arrow
For forms (Very important)
<form action ="backend.php"> (any backend software example where u want to store data)
<label for ="name"> Name</label> (label for should be the same name as in id given below) (this will ena
ble to directly click on the heading and directly type data instead on ticking on the designated area)
<div> ( for divison so that all things are not together is same row)
Name : <input type = "text" name="myemail" id="name"> (Name is the heading for the thing and select in
put type as per what u b=need to input (options will come automatic u just select)(and the name is the na
me by which the backend will recognize it )
</div>
<br> (used to provide line break) ( not recommended but can use till css not learned)
Above was the basic format. Below are the all different additions but the basic format will remain same as
above.
for email use type "email"
for date select type "date"
for number select "number"
for single checkbox select "checkbox" (if u want it to be by default ticked then type cHECKED at the end o
f line)
for gender type where u want to select any one select "radio" and give same name to to both of them (so t
han only 1 of them can be selected)
for into 10 raise to use 43e2 means 43 * 10^2
for submit select "sumbit"
for reset form data select "reset"
to type something in paragraph use "textarea"
"select" is used if u want to select from 2-3 or different things (if u want one option to be selected in defaul
t then after options type selected)
Difference between inline and block elements
Inline - this only occupies the area as per the text wrritten
Block - this occupies the entire space assigned to it irrespective of the amount of text written
Ids and classes
Ids - this name can be given only to one elemnt in the site and is used to recall that when we wont to modi
fy that gropu
Class - this is like a common box with all the defined properties and is used to store many elements who
wish to be of that property
Entites (to write special symbols and numbers like dollar pound copyright french accent 1/2 1/4 )
u write how many spaces it considers only one space. If you want to add more space then for one place &
nbsp; (no breaking space)
to write pound &pound;
to write copyright symbol &copy;
go on net and search html entitites u will get the whole list
Semantic tags
semantic elements are the tags which are used to divide the website properly which helps the search engi
ne to recommened it properly.
examle of semantic tags are <header> ( tells the website about the hadiing of website)
<nav> tells about the navigation and scroll bar of the website
<footer> <image> are many such examples
<summary> tag is used to expand and collapse the content

You might also like