HTML & CSS Tutorials

HTML Syllabus

<!doctype HTML>

<Head> </head>
Generally, we place meta tags and external CSS in header section. Also, external JavaScript’s but placing js in header render blocks the HTMl Page.
So solution is moving JavaScript head to footer means body section.
CSS must be within head section because user may see textmode webpage for few seconds by defer loading CSS in body section.
Body section; all the content placed body section including script, image,HTML
<body> </body>

Example of simple HTMl webpage

</HTML>

Paragraphs <p> we can write anything between these paragraph tags</p>,
Decorations bold <b>text to bold </b> or we use <strong> </strong>

for italic <I> </I> or <em> </em> underline <u> </u> for strike <strike> </strike> <big> </big> is used some bigger text among those.
Blink use for blinking text.

Links:

<a href=” link URL “> hypertext </a>

Rel_no follow tells search engine to no follow the link to prevent link juice external or internal web page.

target_blank opens link in new tab
Target_self open links same window no need to add this.
Target_new window opens in a separate window.
Linking to an email addresses example:
Mailto: [email protected]
Pop-up links used with JavaScript. You can know plain js tutorial.

Headings: these headings are H1 to H6 normally, generally we h1 to h3 only because h4 to h6 looks smaller than Normal text in paragraph.
For Seo & headings search engines pays more attention for headings.
generally in a only 1, H1 tag, 2-3 h2 tags, h3 tags upto 5 is maybe better for both users and search bots.

Ex: <h1> this heading 1</h1>

Color: we can apply this attribute any text ex: h1 or paragraph

<h1 color=” blue”> blue color text</h1>

<br/> jump break diving paragraphs.
<hr/> horizontal line we can insert it anytime

Images: <IMG src=”location of image or web address “>
Alt tag to image alt=”what image about”
Searcgengines can’t read images so they use alt tag,
If you used alt most beautiful woman for a ugly man then search engines display your ugly photo beautiful woman search term.
Deceptive alt tags one of spam indicator to Google.
Image title title= “image name”
Image caption displays below the image
Image description: we may add description if image below it.
Image linking: image instead of anchor text <a href=”http://www.Google.com”> <IMG src=”location of image or web address “> </a>

” double inverted commas or single inverted comma’s ‘ single inverted comma’s use less CPU resources in server.
Html visual composer can do this above all things we don’t need to add tags separately,
Blogger and WordPress post editors can handle this.
For WordPress TinyMCE advanced plugin necessary for headings, inserting tables, horizontal lines etc..

Tables and forms are most useful

How to create tables in HTMl

<tr> table row </tr>
<td> table data we have written in tables</td>
table colum

<table> </table> all the data between these two tags only

Email forms
Contacts forms

CSS

CSS stands for cascading style sheet,

CSS customizes the HTML. Adds colors
Styling text. Layout style widths etc…

Means its loads on priority by inline , internal after external.

Inline css: combine of Html and css in a line,
Internal: separate Html and Css but in a same page.
External CSS; Css loads from external webpage or source.

Benefits by separating css from HTML

Clean code,
Easy to read understand make changes
Helps to other developer.

Comments

<!– this is a comment –>
It will ignore by the browser.

HTML executed in a browser.

selector property value

Selector { property=”value”}

Ex:
H1 {font size=”20px”; decoration=underline }

P {align=”left”}

IMG {default heigh= 150px; width=120px;}

Media queries

Ask a Question: Cancel reply