Difference between revisions of "HTML"
| Line 1: | Line 1: | ||
HTML stands for HyperText Markup Language. | HTML stands for HyperText Markup Language. | ||
| − | = | + | <h1> |
| − | + | <span style="color:pink">Learn Basics</span> | |
| + | </h1> | ||
| + | |||
Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content. | Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content. | ||
Revision as of 09:09, 10 March 2020
HTML stands for HyperText Markup Language.
Contents
Learn Basics
Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.
Example:
To define a paragraph
<p> I'm a paragraph </p>
The <html> Tag
The structure of an HTML document has been compared with that of a sandwich. As a sandwich has two slices of bread, the HTML document has an opening and closing HTML tags.
<html> … </html>
The <head> Tag
Immediately following the opening HTML tag, you'll find the head of the document, which is identified by opening and closing head tags.
The head of an HTML file contains all of the non-visual elements that help make the page work.
<html> <head>…</head> </html>
Defines information about documents, including metadata and scripts
The <body> Tag
The body tag follows the head tag. All visual-structural elements are contained within the body tag.
Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.
<html> <head> </head> <body> </body> </html>
The <title> Tag
To place a title on the tab describing the web page, add a <title> element to your head section:
<html>
<head>
<title>first page</title>
</head>
<body>
This is a line of text.
</body>
</html>
The title element is important because it describes the page and is used by search engines.
Pharagraph
Single Line Break
Use the br tag to add a single line of text without starting a new paragraph:
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph. </p>
<p>This is <br /> a line break </p>
</body>
</html>
Text Formatting
In HTML, there is a list of elements that specify text style.
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is regular text </p>
<p><b>bold text </b></p>
<p><big> big text </big></p>
<p><i> italic text </i></p>
<p><small> small text </small></p>
<p><strong> strong text </strong></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><ins> inserted text </ins></p>
<p><del> deleted text </del></p>
</body>
</html>
This is regular text
bold text
big text
italic text
small text
strong text
subscripted text
superscripted text
inserted text
deleted text
Headings, Lines and Comments
Headings
HTML includes six levels of headings, which are ranked according to importance. These are h1, h2, h3, h4, h5, and h6.
<html>
<head>
<title>first page</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Horizontal Lines
To create a horizontal line, use the hr tag.
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph </p>
<hr />
<p>This is a paragraph </p>
</body>
</html>
In HTML5, the hr tag defines a thematic break.
Comments
The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.
<!-- Your comment goes here -->
Elements
HTML documents are made up of HTML elements. An HTML element is written using a start tag and an end tag, and with the content in between.
HTML documents consist of nested HTML elements. In the example below, the body element includes the p tags, the br tag and the content, "This is a paragraph".
Some HTML elements (like the br tag) do not have end tags.
Some elements are quite small. Since you can't put contents within a break tag, and you don't have an opening and closing break tag, it’s a separate, single element
Attributes
Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.
The Align Attribute
In this example, the value of "center" indicates that the content within the p element should be aligned to the center.
<p align="center"> This text is aligned to the center </p>
<html>
<head>
<title>Attributes</title>
</head>
<body>
<p align="center">This is a text <br />
<hr width="10%" align="right" /> This is also a text.
</p>
</body>
</html>
Attributes are always specified in the start tag, and they appear in name="value" pairs.
Attribute Measurements
As an example, we can modify the horizontal line so it has a width of 50 pixels.
This can be done by using the width attribute:
<hr width="50px" />
An element's width can also be defined using percentages:
<hr width="50%" />
Images
The <img> Tag
The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag. The image's URL (address) can be defined using the src attribute.
The HTML image syntax looks like this:
<img src="image.jpg" />
Image Location
You need to put in the image location for the src attribute that is between the quotation marks.
For example, if you have a photo named "tree.jpg" in the same folder as the HTML file, your code should look like this:
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="tree.jpg" alt="" />
</body>
</html>
In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.
Image Resizing
To define the image size, use the width and height attributes. The value can be specified in pixels or as a percentage:
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="tree.jpg" height="150px" width="150px" alt="" />
<!-- or -->
<img src="tree.jpg" height="50%" width="50%" alt="" />
</body>
</html>
Image Border
By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.
<img src="tree.jpg" height="150px" width="150px" border="1px" alt="" />
Links
The <a> Tag
Links are also an integral part of every web page. You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage. In HTML, links are defined using the <a> tag.
Use the href attribute to define the link's destination address:
<a href=""></a>
Creating Your First Link
<a href="http://www.xxxxx.com"> Learn HTML </a>
Once the code has been saved, "Learn HTML" will display as a link:
Learn HTML
The target Attribute
The target attribute specifies where to open the linked document. Giving a _blank value to your attribute will have the link open in a new window or new tab:
<a href="http://www.sololearn.com" target="_blank"> Learn Playing </a>
Lists
Ordered Lists
An ordered list starts with the ol tag, and each list item is defined by the li tag. Here is an example of an ordered list:
<html>
<head>
<title>first page</title>
</head>
<body>
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
</body>
</html>
The list items will be automatically marked with numbers.
- Red
- Blue
- Green
Unordered List
An unordered list starts with the ul tag.
<html>
<head>
<title>first page</title>
</head>
<body>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</body>
</html>
- Red
- Blue
- Green
Tables
Creating a Table
Tables are defined by using the table tag.
Tables are divided into table rows with the tr tag.
Table rows are divided into table columns (table data) with the td tag.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
The border and colspan Attributes
A border can be added using the border attribute:
<table border="2">
A table cell can span two or more columns:
<table border="2">
<tr>
<td>Red</td>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td><br /></td>
<td colspan="2"><br /></td>
</tr>
</table>
| Red | Blue | Green |
Colspan Attribute
The example below demonstrates the colspan attribute in action:
<table border="2">
<tr>
<td>Red</td>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Yellow</td>
<td colspan="2">Orange</td>
</tr>
</table>
| Red | Blue | Green |
| Yellow | Orange | |
Rowspan Attribute
To make a cell span more than one row, use the rowspan attribute.
<table border="2">
<tr>
<td>Red</td>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Yellow</td>
<td rowspan="2">Orange</td>
</tr>
</table>
| Red | Blue | Green |
| Yellow | Orange |
The align and bgcolor Attributes
To change your table's position, use the align attribute inside your table tag:
<table align="center">
Now let's specify a background color of red for a table cell. To do that, just use the bgcolor attribute.
<table border="2"align="center">
<tr>
<td bgcolor="red">Red</td>
<td>Blue</td>
<td bgcolor="pink">Green</td>
</tr>
<tr>
<td bgcolor="blue"<Yellow</td>
<td colspan="2">Orange</td>
</tr>
</table>
| Red | Blue | Green |
| Yellow | Orange | |
Inline and Block elements
Types of Elements
In HTML, most elements are defined as block level or inline elements. Block-level elements start from a new line. For example: <h1, <form, <li, <ol, <ul, <p, <pre, <table, <div, etc.
Inline elements are normally displayed without line breaks. For example: <b, <a, <strong, <img, <input, <em, <span, etc.
The div element is a block-level element that is often used as a container for other HTML elements. When used together with some CSS styling, the div element can be used to style blocks of content:
<html>
<body>
<h1>Headline</h1>
<div style="background-color:pink; color:blue; padding:20px;">
<p>Some paragraph text goes here.</p>
<p>Another paragraph goes here.</p>
</div>
</body>
</html>
Some paragraph text goes here.
Another paragraph goes here.
Similarly, the <span element is an inline element that is often used as a container for some text. When used together with CSS, the <span element can be used to style parts of the text:
<html>
<body>
<h2>Some
<span style="color:red">Important</span>
Message</h2>
</body>
</html>
See also
Advertising:
