WHAT IS HTML?
HTML is a language of the web. It’s used to design the web pages or we can say structure the page layouts of a website. HTML stands for HYPERTEXT MARKUP LANGUAGE, as its full form suggests it’s not any programming language, a markup language. So, while the execution of HTML code we can’t face any such error. In real HTML code wasn’t compiled or interpreted because HTML code was rendered by the browser. which is similar to the compilation of a program. Html content is parched through the browser to display the content of HTML.
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.
STRUCTURE OF HTML?
<!DOCTYPE html>
<html lang="en">
<head>
<title>ECE TOPPER</title>
<!-- Name of website or content to display -->
</head>
<body>
<!-- Main content of website -->
<h1>ECE TOPPER</h1>
<p>FOR APTITUDE,JOB UPDATES AND MANY OTHER SOLUTIONS</p>
</body>
</html>
| TAG | Description |
|---|---|
| !-- -- | This tag is used to apply comment in an HTML document. |
| !DOCTYPE | This tag is used to specify the version of HTML |
| a | It is termed as anchor tag and it creates a hyperlink or link |
| applet | It defines an embedded Java applet. (Not supported in HTML5) |
| b | It is used to make a text bold. |
| body | It is used to define the body section of an HTML document |
| br | It is used to apply single line break. |
| button | It is used to represent a clickable button |
| p | It represents a paragraph in an HTML document. |
| style | It is used to contain style information for an HTML document. |
| div | It defines a division or section within HTML document. |
| em | It is used to emphasis the content applied within this element. |
| form | It is used to define an HTML form. |
| h1 to h6 | It defines headings for an HTML document from level 1 to level 6. |
| head | It defines the head section of an HTML document. |
| hr | It is used to apply thematic break between paragraph-level elements. |
| html | It represents root of an HTML document. |
| img | It is used to insert an image within an HTML document. |
| li | It is used to represent items in list. |
| link | It represents a relationship between current document and an external resource. |
| table | It is used to present data in tabular form or to create a table within HTML document. |
| ul | It defines unordered list of items. |
| title | It defines the title or name of an HTML document. |
| strong | It is used to define important text. |
| span | It is used for styling and grouping inline. |
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:
- Ordered List or Numbered List (ol)
- Unordered List or Bulleted List (ul)
- Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
- Aries
- Bingo
- Leo
- Oracle
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
- Aries
- Bingo
- Leo
- Oracle
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:
- <dl> tag defines the start of the list.
- <dt> tag defines a term.
- <dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
OUTPUT :
Aries -One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML - Tables
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
HTML Link Syntax
Links are specified in HTML using the “a” tag. <!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>
<body>
<p>Click on the following link</p>
<a href = "https://www.ecetopper.com/">ECETOPPER</a>
</body>
</html>
Example Of Adding a link
Click on the following link
ECETOPPERLink Types :
Links are used to “link” a visitor from one area to another.There area many types of links :
- Local: A page on the same server or directory
- Internal: A section on the current page or document
- External: A page or site on a different server or directory
- Download: A file for the visitor to download
- E-mail: Opens the visitor’s e-mail program
HTML Image :
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src="ecetopper.jpg" alt="ECETOPPER IMAGE" width="500" height="100">
OUTPUT :
HTML FORM :
An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.
| Tags | Description |
|---|---|
| form | It defines an HTML form to enter inputs by the used side. |
| input | It defines an input control. |
| textarea | It defines a multi-line input control. |
| label | It defines a label for an input element. |
| select | It defines a drop-down list |
| option | It defines an option in a drop-down list. |
| button | It defines a clickable button |
| fieldset | It groups the related element in a form. |
| legend | It defines a caption for a fieldset element. |
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
<input type="submit" value="submit">
</form>
THE FRAME:
HTML frame tag define the particular area within an HTML file where another HTML web page can be displayed. A frame tag is used with frameset, and it divides a webpage into multiple sections or frames, and each frame can contain different web pages.
Types of CSS (Cascading Style Sheet)?
Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color etc .property of elements on a web page.
There are three types of CSS which are given below:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS: Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not access the CSS files or to apply styles to element.
<p style="color:blue;">It will be useful here.</p>
Internal or Embedded CSS: The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page.
<style>
body {
background-color: black;
}
h1 {
color: red;
}
</style>
External CSS: In external CSS, we link the web pages to the external .css file. It is created by text editor. The CSS is more efficient method for styling a website. By editing the .css file, we can change the whole site at once.
<link rel="stylesheet" type="text/css" href="style.css" />
Post a Comment
0 Comments