HTML
- HyperText Markup Language is commonly known as HTML, which is a platform independent.
- Developed by W3C (World Wide Web Consortium) and WHATWG ( Web Hypertext Application Technology Working Group)
- Basic of all the languages for creating a web page and with this we can create only static web pages.
- Latest version of all is HTML5, which is used all over right now.
- Used only for displaying the contents and structure of a website logically with the help of CSS.
- We can set constraints and change the webpage dynamically using JAVA SCRIPT.
TAGS
Common Tags used in HTML and their crispy explanation. *All the tags should start as ‘< >’ and end as ‘</ >’ with tag name in-between. *It is Not Case Sensitive.
- <!DOCTYPE html> – To make the browsers understand that it is html document.
- <HTML>….</HTML> – Explains a HTML document.
- <HEAD>….</HEAD> – Provides information about the document.
- <TITLE>….</TITLE> – It will show the title of particular web page in browser tab.
- <BODY>….</BODY> – It will hold all the things that are to be displayed in a web page of a browser.
- <P>….</P> – It’s simply known as paragraph tag, which holds the paragraph content.
BASIC
As we already mentioned why we are using Doctype, Html, Head, Title, Body, Paragraph tags , we shall move on to next step. HEADING :
- Heading size will be differed based on size of Tag from H1 to H6, Where “H1” will have higher priority and “H2” have less priority when compared to “H1” and vice versa.
IMAGE :
- <img src=””>, File source(location) is specified here so that particular image will be displayed.
- src – source of the file.
- alt – alternative name of image (User can understand what the image is about).
- Height and Width are dimensions of image.
<a href> :
- <a> is known as anchor tag. It will “link” current Html file to any other another file.
- Href is known Hyperlink Reference, which is used for giving URL that directs to any other webpage.
<br> :
- Break tag, it will just moves to next line instead of continuing with previous line.
<hr> :
- The <hr> tag generates a horizontal line in an HTML page to separate two lines.
<!DOCTYPE html> <html> <head> <title>HTML Basics</title> <h1>Size 1</h1> <h2>Size 2</h2> <h3>Size 3</h3> <h4>Size 4</h4> <h5>Size 5</h5> <h6>Size 6</h6> <body> <p> Desired paragraph can be written between this tag</p> <img src=”image.jpg” alt=”kprblog” width=”120″ height=”160″> <br> <hr /> <a href=”https://www.techglads.com”>Link</a> <hr /> </body> </head> </html>
<b>OUTPUT:</b></p><h1>Size 1</h1><p> </p><h2>Size 2</h2><p> </p><h3>Size 3</h3><p> </p><h4>Size 4</h4><p> </p><h5>Size 5</h5><p> </p><h6>Size 6</h6><p>Desired paragraph can be written between this tag <img src="https://www.techglads.com/wp-content/uploads/2015/01/BLOG.jpg" alt="kprblog" width="120" height="160" /></p><hr /><p><a href="https://www.techglads.com">Link</a></p><hr />
STYLE
Style is an HTML element used for styling. The <style> tag will provide styling information for a HTML document. It is known as Internal css. To know more about CSS !
SYNTAX :
style="property:value"
Some HTML attributes of STYLE :
- background-color used for background color.
- color used for text colors.
- font-family used for text fonts.
- font-size used for text sizes.
- text-align used for text alignment.
Background-color:
- The specified HTML element’s background color will be changed.
- As in example code, H1 element’s background color is given as Orange.
Color :
- Text color can be changed with this attribute for specified element.
- As in example code, H2 element’s text color is given as Red.
Font-family :
- Font Family is used to change font style of a text or a paragraph of particular element.
- Here we given font-family as Chiller, similarly there are different font styles.
Font-size :
- Font-size is used for increasing the font size, since heading tags will be fixed for each size from H1 to H6.
Text-align :
- Text-align is used for aligning text in proper way.
- Text can be aligned by assigning value as left,right,center,justify.
Just switch over to other tab , where we provided how and where to give style tag and its attributes.
<!DOCTYPE html> <html> <head> <body> <h1 style=”text-align:center;background-color:orange”>WEBSITE</h1> <h2 style=”color:red;font-family:Chiller;font-size:250%”>Kprblog</h2> <pre style=”font-family:Chiller;font-size:200%”> An Educational Website <br> It’s one of the best website for Engineering Students <br> No Fear When We Are Here <br> ! Keep In Touch ! </pre> </body> </head> </html>
<b>OUTPUT:</b></p><h1 style="text-align: center; background-color: orange;">WEBSITE</h1><p> </p><h2 style="color: red; font-family: Chiller; font-size: 250%;">Kprblog</h2><p> </p><pre style="font-family: Chiller; font-size: 200%;"> An Educational Website<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->It’s one of the best website for Engineering Students<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->No Fear When We Are Here ! Keep In Touch !<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></pre><p><b></b><b>
FORMATTING
Special types of text Formatting elements in HTML :
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Inserted text
- Deleted text
- Subscripts
- Superscripts
BOLD AND IMPORTANT TEXT:
- The HTML <b> element explains the bold text without any importance.
- The HTML <strong> element explains the important text.
ITALIC AND EMPHASIZED TEXT :
- The HTML <i> element explains italic text, without any extra importance.
- The HTML <em> element explains empahasized text, with importance.
MARKED AND SMALL TEXT :
- The HTML <mark> element explains marked text to highlight it.
- The HTML <small> element explains small text when compared to others.
INSERTED AND DELETED TEXT :
- The HTML <ins> element explains inserted (add) text.
- The HTML <del> element explains deleted (remove) text.
SUBSCRIPTS AND SUPERSCRIPTS :
- The HTML <sub> element explains subscripted text.
- The HTML <sup> element explains superscripted text.
<html> <head> <body> <p>Normal Text.</p> <p><b>Bold Text.</b></p> <p><strong>Strong Text.</strong></p> <p><i>Italic Text.</i></p> <p><em>Emphasized Text.</em></p> <p><mark>Marked Text.</mark></p> <p>My favorite subject is <del>Maths</del> Computer Science.</p> <p>My favorite <ins>subject</ins> is Computer Science.</p> <p><sup>Superscripted</sup> Text.</p> <p><sub>Subscripted</sub> Text.</p> <h1>HTML <small>Small</small> Format.</h1> </body> </head> </html>
</b><b>OUTPUT :</b> Normal Text. <b>Bold Text.</b> <strong>Strong Text.</strong> <i>Italic Text.</i> <em>Emphasized Text.</em> <mark>Marked Text.</mark> My favorite subject is <del>Maths</del> Computer Science. My favorite <ins>subject</ins> is Computer Science. <sup>Superscripted</sup> Text. <sub>Subscripted</sub> Text.</p><h1>HTML <small>Small</small> Format.</h1><p><b></b><b></b><b></b><b>
QUOTATION
<q> Quotation :
- The HTML <q> element explains a short quotation.
- It is usually used to insert quotations.
<blockquote> Quotation :
- The HTML <blockquote> element explains a long quotation.
- It is similar to above element but used for paragraph or long sentences as quotation.
<abbr> :
- The HTML <abbr> element explains a abbreviation, which is not shown in browsers but used for search engine and browsers understanding.
<address> :
- The HTML <address> element defines about contact information.
- The content between <address> element will be displayed in italic.
<cite> :
- The HTML <cite> element explains the title of a work.
- Here, we described the work of our logo.
<bdo> :
- The HTML <bdo> element explains bi-directional override.
- It is used to override the current text direction.
<html> <body> <p>KPRBLOG is an: <q>Educational website</q></p> <blockquote> Here we provide notes,syllabus,question papers for engineering students </blockquote> <p>Students of <abbr title=”KPR Institute of Engineering and Technology”>KPRIET</abbr></p> <address> KPR Institute of Engineering and Technology,Arasur,Coimbatore,Tamilnadu. </address> <img src=”kprblog.jpg” > <p><cite>Kprblog Logo</cite></p> <bdo dir=”rtl”>This line will be written from right to left</bdo> </body> </html>
</b><b>OUTPUT :</b> KPRBLOG is an: <q>Educational website</q></p><blockquote><p>Here we provide notes,syllabus,question papers for engineering students</p></blockquote><p><b></b><b>Students of <abbr title="KPR Institute of Engineering and Technology">KPRIET</abbr></b></p><address>KPR Institute of Engineering and Technology, Arasur, Coimbatore, Tamilnadu.</address><p><b><img src="https://www.techglads.com/wp-content/uploads/2015/01/BLOG.jpg" alt="kprblog" /><br /> <cite>Kprblog Logo</cite> <bdo dir="rtl">This line will be written from right to left</bdo> </b><b>
HTML CSS
CSS stands for Cascading Style Sheets
There are 3 ways of Styling can be added to HTML elements :
- Inline CSS – using a style attribute along with HTML elements.
- Internal CSS – using <style> element in the HTML <head> section.
- External CSS – using external CSS files (As a separate CSS file ).
The most common way styling a HTML is to keep desired styles in separate CSS files. Here, we use internal styling, because it is ease of demo and easier for you to try it by your own.
To learn more about CSS, move on to CSS page of our site.
