HTML Basic Examples

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Output :


The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>                                                      

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 

Example

<!DOCTYPE html>
<html>
<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>

Output:


HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Output :


HTML Links

HTML links are defined with the <a> tag:

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://3dxboyzz.blogspot.com/search/label/HTML">This is a link</a>

</body>
</html>

The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

Output

↓


HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="Pictures\3DX boyzz.png" alt="3DX boyzz..." width="180" height="142">

</body>
</html>

Output :


Comments

Post a Comment

Popular posts from this blog

Coreldraw ToolBox and its Functions

Image
Coreldraw ToolBox and its Functions Pick Tool = To select, resize, and rotate toward the image object. Shape Edit Shape : Editing an image object shape. Smudge Brush : Alter / distort the overall picture with attractive shorelines. Roughen Brush : Alter / distort the overall outline shape drawing by attractive shorelines. Free Transform Tools : Transform image objects using rotation (rotation)free, rotation angle, and resize, and also tilt the image shape. Crop Tool Crop : Eliminate the unwanted parts in the object. Knife : Alter / distort the overall picture with attractive shorelines. Erase : Remove the area in the picture. Virtual Segment Delete : Delete an object that is part of the intersection (the intersection). Zoom Zoom : Change the magnification of the image in the image window Hand : Adjusts the images that appear in the image window Curve Freehand : Draw segments or curves in the form of a single line Bezier : Drawing curves in the form of a single...
Read more

Photoshop Tools and Toolbar Overview

Image
The Photoshop Toolbar Single Or Double Column Toolbar The Tools Layout The Hidden Tools view and access the additional tools,  click and hold  on the icon. Or,  right-click  (Win) /  Control-click  (Mac) on the icon. The Default Tool To select the Rectangular Marquee Tool at this point Photoshop Tools Summary Move And Selection Tools Move Tool * ( V ) The Move Tool is used to move layers, selections and guides within a Photoshop document. Enable "Auto-Select" to automatically select the layer or group you click on. Art board Tool ( V ) The Art board Tool (new in Photoshop CC) allows you to easily design multiple web or UX (user experience) layouts for different devices or screen sizes. Rectangular Marquee Tool * ( M ) The Rectangular Marquee Tool draws rectangular selection outlines. Press and hold Shift as you drag to draw a square selection. Elliptical Marquee Tool ( M ) The Ellip...
Read more