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 Shortcut keys

CorelDraw Shortcut keys CorelDraw Shortcut keys Align Bottom Main B Aligns selected objects to the bottom Align Centers Horizontally Main E Horizontally aligns the centers of the selected objects Align Centers Vertically Main C Vertically aligns the centers of the selected objects Align Left Main L Aligns selected objects to the left Align Right Main R Aligns selected objects to the right Align To Baseline Main Alt+F12 Aligns text to the baseline Align Top Main T Aligns selected objects to the top Artistic Media Main I Add artistic brush, spray, and calligraphic effects by using freehand strokes. Back One Main Ctrl+PgDn Back One Bold Text Editing Ctrl+B Make the text bold. Bold Table Text Editing Ctrl+B Make the text bold. Break Apart Main Ctrl+K Break the object apart to create multiple objects and paths. Brightness/Contrast/Intensity... Main Ctrl+B Brightness/Contrast/Intensity Bring up Property Bar Main Ctrl+Enter Brings up the Property Bar and gives focus to t...
Read more

Get to know Photoshop (Photoshop basic part-1)

Image
Get to know Photoshop Open images In the menu bar, choose  File > Open  to open existing images. In the menu bar, choose  File > New  to create a new image from scratch. Select a document preset. You can customize the preset by typing in your own values, like width and height. Get familiar with the work area Menu bar  (at the very top) shows the File, Edit, Image, and other menus that give you access to a variety of commands, adjustments, and panels. Options bar  (underneath the menu bar) displays options for the tool you are currently working with. Tools panel  (on the left) contains tools for editing images and creating artwork. Similar tools are grouped together. You can access related tools in a group by clicking and holding a tool in the panel. Panels (on the right) include  Color, Layers, Properties , and other panels that contain a variety of controls for working with images. You can find the full list of panels ...
Read more

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