Chapter 1To 5 HTML

Contents

 
About
 
................................................................................................................................................................................... 1
 
Chapter 1: Getting started with HTML
 
................................................................................................................ 2
 
Section 1.1: Hello World 2
 
Chapter 2: Doctypes
 
.................................................................................................................................................... 4
 
Section 2.1: Adding the Doctype 4
Section 2.2: HTML 5 Doctype 4
 
Chapter 3: Headings
 
.................................................................................................................................................... 5
 
Section 3.1: Using Headings 5
 
Chapter 4: Paragraphs
 
.............................................................................................................................................. 6
 
Section 4.1: HTML Paragraphs
Chapter 5: Text Formatting
 
.....................................................................................................................................  6
.....................................................................................................................................  7
 
Section 5.1: Highlighting 7
Section 5.2: Bold, Italic, and Underline 7
Section 5.3: Abbreviation 8
Section 5.4: Inserted, Deleted, or Stricken 8
Section 5.5: Superscript and Subscript 8
 
Chapter 1: Getting started with HTML

Version 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
Section 1.1: 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>.
 
Creating a simple 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.




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.
Opens the page. No markup should come after the closing tag (</html>). The lang attribute declares
 
<html>


<head>



<meta>
 
the primary language of the page using the ISO language codes (en for English). See the Content Language topic for more information.
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>.
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.
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: Doctypes

Doctypes - short for 'document type' - help browsers to understand the version of HTML the document is written in for better interpretability. Doctype declarations are not HTML tags and belong at the very top of a document. This topic explains the structure and declaration of various doctypes in HTML.
Section 2.1: Adding the Doctype
The <!DOCTYPE> declaration should always be included at the top of the HTML document, before the <html> tag.

Version ≥ 5

See HTML 5 Doctype for details on the HTML 5 Doctype.


Section 2.2: HTML 5 Doctype
HTML5 is not based on SGML (Standard Generalized Markup Language), and therefore does not require a reference to a DTD (Document Type Definition).
HTML 5 Doctype declaration:

Case Insensitivity

Per the W3.org HTML 5 DOCTYPE Spec:

A DOCTYPE must consist of the following components, in this order:

1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".

therefore the following DOCTYPEs are also valid:


This SO article discusses the topic extensively: Uppercase or lowercase doctype?
 
Chapter 3: Headings

HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while heading 6 is the smallest and thinnest, down to the paragraph level. This topic details proper usage of these tags.
Section 3.1: Using Headings
Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. Headings support all the global attributes.

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

Defining a heading:

Correct structure matters

Search engines and other user agents usually index page content based on heading elements, for example to create a table of contents, so using the correct structure for headings is important.
In general, an article should have one h1 element for the main title followed by h2 subtitles – going down a layer if necessary. If there are h1 elements on a higher level they shoudn't be used to describe any lower level content.

Example document (extra intendation to illustrate hierarchy):

 
Chapter 4: Paragraphs

Column Column
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text

Paragraphs are the most basic HTML element. This topic explains and demonstrates the usage of the paragraph element in HTML.

Section 4.1: HTML Paragraphs

The HTML <p> element defines a paragraph:


Display-

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed:
 
Chapter 5: Text Formatting

While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text

Section 5.1: Highlighting

The <mark> element is new in HTML5 and is used to mark or highlight text in a document "due to its relevance in another context".1

The most common example would be in the results of a search were the user has entered a search query and results are shown highlighting the desired query.


Output:


A common standard formatting is black text on a yellow background, but this can be changed with CSS.

Section 5.2: Bold, Italic, and Underline
Bold Text

To bold text, use the <strong> or <b> tags:


or


What's the difference? Semantics. <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.

If you were to use <b> a text-to-speech program would not say the word(s) any differently than any of the other words around it - you are simply drawing attention to them without adding any additional importance. By using
<strong>, though, the same program would want to speak those word(s) with a different tone of voice to convey that the text is important in some way.

Italic Text

To italicize text, use the <em> or <i> tags:

 
or


What's the difference? Semantics. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set off from the normal text around it.

For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via
<em>: "Would you just submit the edit already?"

But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use
<i>: "I was forced to read Romeo and Juliet in high school.

Underlined Text

While the <u> element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 - to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.


Section 5.3: Abbreviation

To mark some expression as an abbreviation, use <abbr> tag:


If present, the title attribute is used to present the full description of such abbreviation.

Section 5.4: Inserted, Deleted, or Stricken

To mark text as inserted, use the <ins> tag:


To mark text as deleted, use the <del> tag:


To strike through text, use the <s> tag:


Section 5.5: Superscript and Subscript

To offset text either upward or downward you can use the tags <sup> and <sub>. To create superscript:
 

To create subscript:
 
@EVERYTHINGNT

Related news


No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Labels

14.6.2014 draw 297/14 19 Mei 2013 23 Jun 2013 24.04.2013 25 Jun 2013 4 mei 2014 - draw 278/14 6 mei 2014 Adakah anda bersetuju dengan pernyataan tentang zakar ini? BERIKUT MERUPAKAN NOMBOR RAMALAN UNTUK MAGNUM 4D PADA 30 OGOS 2014 draw 143/13 draw 279/14 DRAW ID 098/13. DRAW ID 099/13: NOMBOR RAMALAN UNTUK MAGNUM 4D PADA 4 MEI 2013 DRAW ID 139/13. DRAW ID 141/13. DRAW ID 142/13 DRAW ID 142/13 / PREDICTION FOR MAGNUM 4D COUNTER ON 3 AUGUST 2013 ID CABUTAN 098/13 / PREDICTION FOR MAGNUM 4D COUNTER ON 1 MAY 2013 ID CABUTAN 099/13 / ID CABUTAN 139/13 / PREDICTION FOR MAGNUM 4D COUNTER ON 27 JULY 2013 ID CABUTAN 141/13 / PREDICTION FOR MAGNUM 4D COUNTER ON 31 JULY 2013 Keputusan dan perbandingan antara nombor ramalan dan result Magnum 4D pada 31 Julai 2013 Keputusan Magnum 4D Kerja part time/ sambilan : Peluang tambah pendapatan Magnum 4d result 1 May 2013 Draw 098/13 Magnum draw 094/13 nombor 4d 6.7.2014 308/14 Nombor 4d untuk hari ini : 21/04/2013 nombor magnum 4d draw 107/13 ; Ahad nombor magnum 4d untuk draw 101/13: 7 mei 2013 ( magnum 4d prediction number for draw 101/13 : 7 may 2013 Nombor ramalan 4d : 24.04.2013 Nombor ramalan dan keputusan Magnum 4D draw 119/13 pada 15 Jun 2013 Nombor ramalan Magnum 4D 4 Ogos 2013 draw 143/13 Nombor ramalan Magnum 4D 7 Ogos 2013 draw 144/13 nombor ramalan Magnum 4D dan result pada 4 Ogos 2013 Nombor ramalan magnum 4d draw 112/13 29 Mei 2013 Nombor ramalan Magnum 4D pada 1 Jun 2013 draw 113/13 nombor ramalan magnum 4d pada 14.6.2014 draw 297/14 Nombor ramalan Magnum 4D pada 2 Jun 2013 Draw 114/13 nombor ramalan magnum 4d pada 23 ogos 2014 draw 329/14 Nombor ramalan magnum 4d pada 26.05.2015 draw 467/15 - special draw Nombor Ramalan Magnum 4D pada 30 April 2014 draw 276/14 nombor ramalan magnum 4d pada 30 ogos 2014 draw 333/14 nombor ramalan magnum 4d pada 4 mei 2014 - draw 278/14 Nombor ramalan magnum 4d pada 5 julai 2014 hari sabtu draw 307/14 nombor ramalan magnum 4d pada 7 september 2014 draw 338/14 ( 7.9.2014/338/14) nombor ramalan magnum 4d pada 8 Februari 2014 (8/2/2014) draw 235/14 nombor ramalan magnum 4d pada hari ahad nombor ramalan magnum 4d pada hari ahad 6 julai 2014 draw 308/14 nombor ramalan magnum 4d pada hari rabu 25 september 2013 draw 168/13 nombor ramalan magnum 4d pada hari rabu 9 julai 2014 draw 309/14 nombor ramalan magnum 4d pada hari sabtu nombor ramalan magnum 4d pada hari sabtu 13.9.2014 draw 340/14 nombor ramalan magnum 4d pada hari sabtu 26 oktober 2013 draw 182/13 nombor ramalan magnum 4d pada hari selasa Nombor ramalan Magnum 4D untuk draw 118/13 pada hari Rabu 12 Jun 2013 Nombor ramalan Magnum 4D untuk draw 119/13 pada hari Sabtu 16 Jun 2013 Nombor ramalan Magnum 4D untuk draw 120/13 pada hari Ahad 16 Jun 2013 Nombor ramalan Magnum 4D untuk draw 121/13 pada hari Rabu 19 Jun 2013. Nombor ramalan Magnum 4D untuk draw 123/13 pada hari Ahad Nombor ramalan Magnum 4D untuk draw 124/13 pada hari Selasa (special draw) Nombor ramalan Magnum 4D untuk draw 231/14 pada hari Sabtu 1 Februari 2014 Nombor ramalan Magnum 4D untuk hari Sabtu 7 Ogos 2013 draw 149/13 Nombor ramalan Magnum 4D untuk hari Selasa 3 September 2013 draw 158/13 | SPECIAL DRAW Nombor ramalan MAGNUM 4D untuk special draw 111/13 28 Mei 2013 Nombor ramalan untuk hari Rabu nombor ramalan untuk MAGNUM 4D Nombor ramalan untuk magnum 4d draw 105/13: 15 Mei 2013 Nombor ramalan untuk magnum 4d draw 120/13 dan keputusan/result magnum 4d pada 16 Jun 2013 NOMBOR RAMALAN UNTUK MAGNUM 4D PADA 1 MEI 2013 NOMBOR RAMALAN UNTUK MAGNUM 4D PADA 27 JULAI 2013 NOMBOR RAMALAN UNTUK MAGNUM 4D PADA 3 OGOS 2013 NOMBOR RAMALAN UNTUK MAGNUM 4D PADA 31 JULAI 2013 nombor ramalan untuk magnun 4d pada 3 mei 2014-277/14 nombor untuk magnum 4d draw 095/13 : 27 April 2013 PREDICTION FOR MAGNUM 4D ON 4 MAY 2013 ramalan magnum 4d 9.7.14 309/14 Ramalan pada 12 Jun 2013 dan keputusan Magnum 4D Result 21.4.2013 Cash Sweep Result 21.4.2013 DaMaCai Result 21.4.2013 Magnum Result 21.4.2013 Toto special draw 28 Mei 2013 special draw pada 28 MEI 2013. TERKINI| TERBARU: nombor magnum 4d 7 mei 2013; 101/13 ; special draw Toto draw 3871/13

**Penafian**

Nombor ramalan hanyalah sebagai panduan dan dicadangkan untuk MAGNUM SAHAJA (atau kaunter lain sekiranya sesuai) . Segala pertaruhan adalah atas risiko anda sendiri.