Chapter 1: Getting started with HTML

Remarks

HTML (Hypertext Markup Language) is an XML-compliant system of annotating documents with 'tags'. It is used specifically to create content for web pages and web applications, which can then Be shared over a network.

Apart from text, the current version of HTML supports many different types of media, including Images and videos.

Versions

Version Specification Release DateVersion Specification Release Date

1.0 N/A 1994-01-01

2.0 RFC 1866 1995-11-24

3.2 W3C: HTML 3.2 Specification 1997-01-14

4.0 W3C: HTML 4.0 Specification 1998-04-24

4.01 W3C: HTML 4.01 Specification 1999-12-24

5 WHATWG: HTML Living Standard 2014-10-28

5.1 W3C: HTML 5.1 Specification 2016-11-01

Examples

Hello World

Introduction

HTML (Hypertext Markup Language) uses a markup system composed of elements which

represent specific content. Markup means that with HTML you declare what is presented to a viewer, not how it is presented. Visual representations are defined by Cascading Style Sheets (CSS) and realized by browsers. Still existing elements that allow for such, like e.g. font, "are entirely obsolete, and must not be used by authors"[1].

HTML is sometimes called a programming language but it has no logic, so is a markup language.

HTML tags provide semantic meaning and machine-readability to the content in the page.

An element usually consists of an opening tag (<element_name>), a closing tag (</element_name>), which contain the element's name surrounded by angle brackets, and the content in between:<element_name>...content...</element_name>

There are some HTML elements that don't have a closing tag or any contents. These are called void elements. Void elements include <img>, <meta>, <link> and <input>.

Element names can be thought of as descriptive keywords for the content they contain, such as video, audio, table, footer.

A HTML page may consist of potentially hundreds of elements which are then read by a web browser, interpreted and rendered into human readable or audible content on the screen.

For this document it is important to note the difference between elements and tags:

Elements: video, audio, table, footer

Tags: <video>, <audio>, <table>, <footer>, </html>, </body>

Element insight

Let's break down a tag...

The <p> tag represents a common paragraph.

Elements commonly have an opening tag and a closing tag. The opening tag contains the element's name in angle brackets (<p>). The closing tag is identical to the opening tag with the addition of a forward slash (/) between the opening bracket and the element's name (</p>).

Content can then go between these two tags: <p>This is a simple paragraph.</p>.

Creatiimplng a se page

The following HTML example creates a simple "Hello World" web page.

HTML files can be created using any text editor. The files must be saved with a .html or .htm[2] extension in order to be recognized as HTML files.

Once created, this file can be opened in any web browser.

<!DOCTYPE html>

<head>

<title>Hello!</title>

</head>

<body>

<h1>Hello World!</h1>

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

</body>

</html>

Simple page break down

These are the tags used in the example:

Tag Meaning

<!DOCTYPE> Defines the HTML version used in the document. In this case it is HTML5.

See the doctypes topic for more information.

<html>

Opens the page. No markup should come after the closing tag (</html>). The

lang attribute declares the primary language of the page using the ISO language

codes (en for English).

See the Content Language topic for more information.

<head>

Opens the head section, which does not appear in the main browser window but

mainly contains information about the HTML document, called metadata. It can

also contain imports from external stylesheets and scripts. The closing tag is

</head>.

<meta>

Gives the browser some metadata about the document. The charset attribute

declares the character encoding. Modern HTML documents should always use

UTF-8, even though it is not a requirement. In HTML, the <meta> tag does not

require a closing tag.

See the Meta topic for more information.

<title>

The title of the page. Text written between this opening and the closing tag (

</title>) will be displayed on the tab of the page or in the title bar of the browser.

<body>

Opens the part of the document displayed to users, i.e. all the visible or audible

content of a page. No content should be added after the closing tag </body>.

<h1> A level 1 heading for the page.

https://riptutorial.com/ 4

Tag Meaning

See headings for more information.

<p> Represents a common paragraph of text.

1. ↑ HTML5, 11.2 Non-conforming features

2. ↑ .htm is inherited from the legacy DOS three character file extension limit.

Chapter 2: Anchors and Hyperlinks

Introduction

Anchor tags are commonly used to link separate webpages, but they can also be used to link

between different places in a single document, often within table of contents or even launch

external applications. This topic explains the implementation and application of HTML anchor tags in various roles.

Syntax

• <a href="URL or anchor">Link Text</a>

Parameters

Parameter Details

href

Specifies the destination address. It can be an absolute or relative URL, or the name of an anchor. An absolute URL is the complete URL of a website like http://example.com/. A relative URL points to another directory and/or document inside the same website, e.g. /about-us/ points to the directory “about-us” inside the root directory (/). When pointing to another directory without explicitly specifying the document, web servers typically return the document “index.html”inside that directory.

hreflang

Specifies the language of the resource linked by the href attribute (which must be present with this one). Use language values from BCP 47 for HTML5 andRFC 1766 for HTML 4.

rel

Specifies the relationship between the current document and the linked document. For HTML5, the values must be defined in the specification or in the Microformats wiki.

target

Specifies where to open the link, e.g. in a new tab or window. Possible values are _blank, _self, _parent, _top, and framename (deprecated). Forcing suchbehaviour is not recommended since it violates the control of the user over awebsite.

Title

Specifies extra information about a link. The information is most often shown astooltip text when the cursor moves over the link. This attribute is not restrictedto links, it can be used on almost all HTML tags.

download

Specifies that the target will be downloaded when a user clicks on the hyperlink.The value of the attribute will be the name of the downloaded file. There are norestrictions on allowed values, and the browser will automatically detect the. correct file extension and add it to the file (.img, .pdf, etc.). If the value isomitted, the original filename is used.

Examples

Link to another site

This is the basic use of the <a> (anchor element) element:

<a href="http://example.com/">Link to example.com</a>

It creates a hyperlink, to the URL http://example.com/ as specified by the href (hypertext

reference) attribute, with the anchor text "Link to example.com". It would look something like the following:

Link to example.com

To denote that this link leads to an external website, you can use the external link type:

<a href="http://example.com/" rel="external">example site</a>

You can link to a site that uses a protocol other than HTTP. For example, to link to an FTP site,you can do,

<a href="ftp://example.com/">This could be a link to a FTP site</a>

In this case, the difference is that this anchor tag is requesting that the user's browser connect to example.comexample.com using the File Transfer Protocol (FTP) rather than the Hypertext Transfer Protocol(HTTP).

This could be a link to a FTP site

Open link in new tab/window

The target attribute specifies where to open the link. By setting it to _blank, you tell the browser toopen it in a new tab or window (per user preference).

SECURITY VULNERABILITY WARNING!

Using target="_blank" gives the opening site partial access to the window.opener objectvia JavaScript, which allows that page to then access and change the

window.opener.location of your page and potentially redirect users to malware or

phishing sites.

Whenever using this for pages you do not control, add rel="noopener" to your link toprevent the window.opener object from being sent with the request.

Currently, Firefox does not support noopener, so you will need to use rel="noopener

noreferrer" for maximum effect.

Link to an anchor

Anchors can be used to jump to specific tags on an HTML page. The <a> tag can point to anyelement that has an id attribute. To learn more about IDs, visit the documentation about Classesand IDs. Anchors are mostly used to jump to a subsection of a page and are used in conjunctionwith header tags.

Suppose you've created a page (page1.html) on many topics:

<h2>First topic</h2>

<p>Content about the first topic</p>

<h2>Second topic</h2>

<p>Content about the second topic</p>

Once you have several sections, you may want to create a Table of Contents at the top of thepage with quick-links (or bookmarks) to specific sections.If you gave an id attribute to your topics, you could then link to them

<h2 id="Topic1">First topic</h2>

<p>Content about the first topic</p>

<h2 id="Topic2">Second topic</h2>

<p>Content about the second topic</p>

Now you can use the anchor in your table of contents:

<h1>Table of Contents</h1>

<a href='#Topic1'>Click to jump to the First Topic</a>

<a href='#Topic2'>Click to jump to the Second Topic</a>

These anchors are also attached to the web page they're on (page1.html). So you can link acrossthe site from one page to the other by referencing the page and anchor name.

Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for

supporting information.

Link that runs JavaScript

Simply use the javascript: protocol to run the text as JavaScript instead of opening it as a normal

link:

You can also achieve the same thing using the onclick attribute:

The return false; is necessary to prevent your page from scrolling to the top when the link to # isclicked. Make sure to include all code you'd like to run before it, as returning will stop execution offurther code.

Also noteworthy, you can include an exclamation mark ! after the hashtag in order to prevent thepage from scrolling to the top. This works because any invalid slug will cause the link to not scrollanywhere on the page, because it couldn't locate the element it references (an element with id="!").You could also just use any invalid slug (such as #scrollsNowhere) to achieve the same effect. In this case, return false; is not required:

Should you be using any of this?

The answer is almost certainly no. Running JavaScript inline with the element like thisis fairly bad practice. Consider using pure JavaScript solutions that look for the elementin the page and bind a function to it instead. Listening for an event

Also consider whether this element is really a button instead of a link. If so, you shoulduse <button>.

Link to a page on the same site

You can use a relative path to link to pages on the same website.

The above example would go to the file example at the root directory (/) of the server.

If this link was on http://example.com, the following two links would bring the user to the same location

Both of the above would go to the page file at the root directory of example.com.

Link that runs email client

Basic usage

If the value of the href-attribute begins with mailto: it will try to open an email client on click:

<a href="mailto:example@example.com">Send email</a>

This will put the email address example@example.com as the recipient for the newly created email.

Cc and Bcc

You can also add addresses for cc- or bcc-recipients using the following syntax:

<a href="mailto:example@example.com?cc=john@example.com&bcc=jane@example.com">Send email</a>

Subject and body text

You can populate the subject and body for the new email as well:

<a href="mailto:example@example.com?subject=Example+subject&body=Message+text">Send email</a>

Those values must be URL encoded.

Clicking on a link with mailto: will try to open the default email client specified by your operatingsystem or it will ask you to choose what client you want to use. Not all options specified after therecipient's address are supported in all email clients.

Link that dials a number

If the value of the href-attribute begins with tel:, your device will dial the number when you click it.This works on mobile devices or on computers/tablets running software – like Skype or FaceTime– that can make phone calls.

Most devices and programs will prompt the user in some way to confirm the number they are about to dial.

Getting started with HTML

Post a Comment

other forms of 2-D processes

Defender Control v2.1

painting and drawing

संपर्क फ़ॉर्म