Scribd
Upload
84 views

Html5: Writing HTML Using Notepad or Textedit

HTML can be edited using a text editor or HTML editor. Basic HTML tags were described like <a> for links, <img> for images, and <hr> for horizontal rules. The document provided examples and explanations of many common HTML tags for text formatting, computer code, citations, and more. It also covered important head elements like <title>, <style>, <meta>, and <script>.

Uploaded by

Thangadurai Ponnusamy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
84 views

Html5: Writing HTML Using Notepad or Textedit

HTML can be edited using a text editor or HTML editor. Basic HTML tags were described like <a> for links, <img> for images, and <hr> for horizontal rules. The document provided examples and explanations of many common HTML tags for text formatting, computer code, citations, and more. It also covered important head elements like <title>, <style>, <meta>, and <script>.

Uploaded by

Thangadurai Ponnusamy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML5

Writing HTML Using Notepad or TextEdit


HTML can be edited by using a professional HTML editor like:

Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor

HTML Links
HTML links are defined with the <a> tag.

Example
<a href="http://www.w3schools.com">This is a link</a>

HTML Images
HTML images are defined with the <img> tag.

Example
<img src="w3schools.jpg" width="104" height="142">

HTML Lines
The <hr>tag creates a horizontal line in an HTML page. The hr element can be used to separate content:

Example
<p>This is a paragraph.</p> <hr>

<p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> Try it yourself

HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this:

Example
<!-- This is a comment --> Try it yourself

HTML Tag Reference


W3Schools' tag reference contains additional information about these tags and their attributes. You will learn more about HTML tags and attributes in the next chapters of this tutorial. Tag Description <html> Defines an HTML document <body> Defines the document's body <h1> to <h6> Defines HTML headings <hr> Defines a horizontal line <!--> Defines a comment

HTML Line Breaks


Use the <br> tag if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a para<br>graph with line breaks</p>

Try it yourself

HTML Text Formatting Tags


Tag <b> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Description Defines bold text Defines emphasized text Defines a part of text in an alternate voice or mood Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text

HTML "Computer Output" Tags


Tag Description <code> Defines computer code text <kbd> Defines keyboard text <samp> Defines sample computer code <var> Defines a variable <pre> Defines preformatted text

HTML Text Formatting Tags


Tag <b> <em> <i> <small> <strong> <sub> <sup> <ins> Description Defines bold text Defines emphasized text Defines a part of text in an alternate voice or mood Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text

<del>

Defines deleted text

HTML "Computer Output" Tags


Tag Description <code> Defines computer code text <kbd> Defines keyboard text <samp> Defines sample computer code <var> Defines a variable <pre> Defines preformatted text

HTML Citations, Quotations, and Definition Tags


Tag <abbr> <address> <bdo> <blockquote> <q> <cite> <dfn> Description Defines an abbreviation or acronym Defines contact information for the author/owner of a document Defines the text direction Defines a section that is quoted from another source Defines an inline (short) quotation Defines the title of a work Defines a definition term

HTML Links - The target Attribute


The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:

Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> Try it yourself

Basic Notes - Useful Tips


Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two requests to the server, the server

will first add a slash to the address, and then create a new request like this: href="http://www.w3schools.com/html/".

HTML head Elements


Tag <head> <title> <base> <link> <meta> <script> <style> Description Defines information about the document Defines the title of a document Defines a default address or a default target for all links on a page Defines the relationship between a document and an external resource Defines metadata about an HTML document Defines a client-side script Defines style information for a document

The HTML <title> Element :


<head> <title>Title of the document</title> </head>

The HTML <base> Element


The <base> tag specifies the base URL/target for all relative URLs in a page: <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head>

The HTML <link> Element


The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

The HTML <style> Element


The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>

The HTML <meta> Element


Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always goes inside the <head> element.

<meta> Tags - Examples of Use


Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Define a description of your web page:


<meta name="description" content="Free Web tutorials on HTML and CSS">

Define the author of a page:


<meta name="author" content="Hege Refsnes">

Refresh document every 30 seconds:


<meta http-equiv="refresh" content="30">

The HTML <script> Element

The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element will be explained in a later chapter.

You might also like