HTML Introduction:
HTML (Hypertext Markup Language) is used to create documents on the World Wide Web. It is simply a collection of certain key
words called ‘Tags’ that are helpful in writing the document to be displayed using a browser on the Internet.
The major points of HTML are given below:
- HTML stands for HyperText Markup Language.
- HTML is used to create web pages and web applications.
- HTML is widely used language on the web.
- We can create a static website by HTML only.
- Technically, HTML is a Markup language rather than a programming language.
OBJECTIVES:
- Create, save and view a HTML document
- l format a web page using section heading tags
- l describe Ordered and Unordered lists
- l explain graphics in HTML document
- l describe hypertext links and making text/image links
A Simple HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output
My First Heading
My first paragraph.
Creating a HTML document
- <HTML>…………..</HTML>
- <HEAD>………….</HEAD>
- <BOAY>………….</HEAD>
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:<tagname>Content goes here…</tagname>
The HTML element is everything from the start tag to the end tag:<h1>My First Heading</h1><p>e-learningadda.</p>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | e-learningadda. . | </p> |
| <br> | none | none |
Other Key Elements
They are as follows:
| Element | Meaning | Purpose |
|---|---|---|
| <b> | Bold | Highlight important information |
| <strong> | Strong | Similarly to bold, to highlight key text |
| <i> | Italic | To denote text |
| <em> | Emphasized Text | Usually used as image captions |
| <mark> | Marked Text | Highlight the background of the text |
| <small> | Small Text | To shrink the text |
| <strike> | Striked Out Text | To place a horizontal line across the text |
| <u> | Underlined Text | Used for links or text highlights |
| <ins> | Inserted Text | Displayed with an underline to show an inserted text |
| <sub> | Subscript Text | Typographical stylistic choice |
| <sup> | Superscript Text | Another typographical presentation style |
HTML text Editors
- Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor.
- There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
- After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
Step 3: Save the HTML file with .htm or .html extension.
Step 4: Open the HTML page in your web browser.
| The Anchor Tag | <a href=”https://www.e-learningadda.com/“>Your Link Text Here </a> |
| HTML Attributes | <img src=”mydog.jpg” alt=”A photo of my dog.”> |
| Multiple tags | <strong><em>This is really important!</em></strong> |
| Creating Your Heading | <h1>Welcome to My Page</h1> |
| Create Your Own Image With An Alt Text | <img src=”testpic.jpg” alt=”This is a test image” height=”42″ width=”42″> |
HTML Versus XHTML
| HTML | XHTML |
| HTML stands for Hypertext Markup Language. | HTML stands for Hypertext Markup Language. |
| It is extended from SGML | It is extended from XML and HTML. |
| While using the attributes it is not necessary to mention quotes. For e.g. <Geeks>. | While using the attributes it is mandatory to mention quotes. For e.g. <Geeks=”GFG”>. |
| Filename extension used are .html, .htm. | Filename extension are .xhtml, .xht, .xml. |
| Application of Standard Generalized Markup Language (SGML). | Application of XML |
| Proposed by Tim Berners-Lee in 1987. | World Wide Web Consortium Recommendation in 2000. |
| HTML is not mandatory for one root element. | XHTML documents must have one root element |
HTML Styles – CSS
CSS stands for Cascading Style Sheets.
Cascading Style Sheets (CSS) were introduced as a specific mechanism to control the appearance of web pages.
Web designers control the presentation of a page using one or more CSS declarations, each of which is structured like this
property-name: property-value;
Example: You can define a table border as follows:
table{ border :1px solid #C00; }
Attributes
| Attribute | Value | Description |
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file having Style rules. This attribute is a required? |
| media | screen tv projection handheld print braille | Specifies the device the document will be displayed on. The default value is all. This is an optional attribute. |
Important code for CSS Internal, External, Inline
| CSS Colors, Fonts, and Sizes | <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>E-learningadda.com</h1> <p>Education platefrom</p> </body> </html |
| CSS Border | p { border: 2px solid powderblue; } |
| CSS Padding | p { border: 2px solid powderblue; padding: 30px; } |
| CSS Margin | p { border: 2px solid powderblue; margin: 50px; } |
| Link to External CSS | <link rel=”stylesheet” href=”https://www.e-learningadda.com/“> |
How to use <marquee> tag in HTML:
| Scroll up Link | <marquee width=”60%” direction=”up” height=”100px”> E-learningadda.com </marquee> |
| Scroll Down | <marquee width=”60%” direction=”Down” height=”100px”> E-learningadda.com </marquee> |
| Scroll left to right | <marquee width=”60%” direction=”right” height=”100px”> that has scrolls texts to right. </marquee> |
| Scroll right to left | <marquee width=”60%” direction=”left” height=”100px”> HTML Code Run </marquee> |
| Scrolling Speed | <marquee behavior=”scroll” direction=”up” scrollamount=”1″>Slow Scrolling</marquee> <marquee behavior=”scroll” direction=”right” scrollamount=”12″>Little Fast Scrolling</marquee> <marquee behavior=”scroll” direction=”left” scrollamount=”20″>Fast Scrolling</marquee> <marquee behavior=”scroll” direction=”right” scrollamount=”50″>Very Fast Scrolling</marquee> |
HTML -Tag (HTML tags used for formatting a web page are)
| HEADING | <H1>………….<H6> |
| Paragraph tag | <P> |
| Break Tag | <BR> |
| Preformatted Text Tag | <PRE> |
| Horizontal Rule Tag | <HR> |
| Character Formatting Tags | Boldface <B>,Italics <I>,Subscript <SUB>,Superscript <SUP>, Small <SMALL>,Big <BIG> |
| Font Colors and Size | <FONT> |
| Ordered List | <OL> |
| Unordered List | <UL> |
Book Pdf Download HTML-CSS