SlideShare a Scribd company logo
1 of 23
HTML CONTENTS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
THE HTML TAG <HTML> TAG: Tags are contained in < > symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag. Is usually placed on the first line of your document. At the end of your document you should close with the </html> tag. The <html> tag signals the point where text should start being interpreted as HTML code.
THE HEAD TAG Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively. <html> <head> <title>My First HTML Document</title> </head>
TITLES A title tag allows you to specify a Document Title in your browser window. When people make hotlists, this title is what they see in their list after they add your document. The format is: <title>My First HTML Document</title> Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.
THE BODY TAG Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document. The body should start after the head. A typical page might begin like <html> <head> <title>My First HTML Document</title> </head> <body>
HEADERS There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another. <h1>This is a header 1 tag</h1> This is a header 1 tag Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them.
PARAGRAPHS In HTML, a paragraph tag <p> should be put at the end of every paragraph of &quot;normal&quot; text (normal being defined as not already having a tag associated with it). <p> causes a line break and adds a trailing blank line <br> causes a line break with no trailing blank line As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.
PREFORMATTED TEXT The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font. <pre>this is  an example  of a  preformatted  text tag</pre>
BOLDFACE AND ITALICS When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.
Physical tags This is a <b>boldface</b> tag.  This is how boldfacing appears. This is an <i>italic</i> tag.  This is how italics appear. Logical tags   This is a <strong>strongly emphasized</strong> tag.  This is a strongly emphasized tag. This is an <em>emphasized</em> tag.  This is an emphasized tag.
LISTS There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists. When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.
UNNUMBERED LISTS Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. For example, here is an unnumbered list with three items: <ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul>
NUMBERED LISTS Here is the same list using a numbered list format: <ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>
DEFINITION LISTS Definition lists allow you to indent without necessarily having to use bullets. <dl> <dt> This is a term <dd> This is a definition <dd> And yet another definition <dt> Another term <dd> Another definition </dl>
NESTED LISTS Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list). <ul> <li> list item 1 <li> nested item 1 <ul> <li> nested item 2 <li> nested item 1 </ul> <li> nested item 2 </ul> </ul> <li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 3 <ul>
BLOCKQUOTE The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this: <blockquote>...</blockquote> and displays like this: Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.
CENTER You can center text, images, and headings with the center tag: <center>This is a centered sentence</center> This is a centered sentence. The center tag automatically inserts a line break after the closing center tag.
HORIZONTAL RULE To separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows:
Addresses The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. <address> Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu </address>
COMMENTS It is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document. Comments take the form: <!-----This comment will not appear in the browser----->
STRIKE-THROUGH Should you want it, there is a strike-through tag which displays text with a strike. <strike>This is struck through text</strike> displays as This is struck through text
SPECIAL CHARACTERS &aacute; .... á  &acirc;  .... â  &aelig;  .... æ  &agrave; .... à  &amp;  .... &  &aring;  .... å  &atilde; .... ã  &auml;  .... ä  &ccedil; .... ç  &eacute; .... é  &ecirc;  .... ê  &egrave; .... è  &eth;  .... ð  &euml;  .... ë  &gt;  .... >  &iacute; .... í  &icirc;  .... î  &igrave; .... ì  &iuml;  .... ï  &lt;  .... <  &ntilde; .... ñ  &oacute; .... ó  &ocirc;  .... ô  &ograve; .... ò  &oslash; .... ø  &otilde; .... õ  &ouml;  .... ö  &quot;  .... &quot;  &szlig;  .... ß  &thorn;  .... þ  &uacute; .... ú  &ucirc;  .... û  &ugrave; .... ù  &uuml;  .... ü  &yacute; .... ý  &yuml;  .... ÿ
THANK  YOU

More Related Content

What's hot

What's hot (20)

Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Html coding
Html codingHtml coding
Html coding
 
HTML
HTMLHTML
HTML
 
HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptx
 
Html text and formatting
Html text and formattingHtml text and formatting
Html text and formatting
 
Javascript
JavascriptJavascript
Javascript
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Html forms
Html formsHtml forms
Html forms
 

Viewers also liked

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLMayaLisa
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
7 pemrograman internet javascript
7 pemrograman internet  javascript7 pemrograman internet  javascript
7 pemrograman internet javascriptToni Tegar Sahidi
 
Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)Arifin Swift
 
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Arifin Swift
 
Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman webDeka M Wildan
 
Pemrograman Web - Konsep Pemrograman Internet
Pemrograman Web - Konsep Pemrograman InternetPemrograman Web - Konsep Pemrograman Internet
Pemrograman Web - Konsep Pemrograman InternetKuliahKita
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman webexkun
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQLPanduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQLDoni Tobing
 
Introduction to the Internet
Introduction to the InternetIntroduction to the Internet
Introduction to the Internetcoastalgraphics
 
Bus Booking Management System
Bus Booking Management SystemBus Booking Management System
Bus Booking Management SystemMike Marshall
 

Viewers also liked (20)

Html Ppt
Html PptHtml Ppt
Html Ppt
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Html.ppt
Html.pptHtml.ppt
Html.ppt
 
7 pemrograman internet javascript
7 pemrograman internet  javascript7 pemrograman internet  javascript
7 pemrograman internet javascript
 
Introduction to DOM
Introduction to DOMIntroduction to DOM
Introduction to DOM
 
Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)
 
Html tags slides 2016
Html tags slides 2016Html tags slides 2016
Html tags slides 2016
 
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)
 
Modul dasar pemrograman web
Modul dasar pemrograman webModul dasar pemrograman web
Modul dasar pemrograman web
 
Pemrograman Web - Konsep Pemrograman Internet
Pemrograman Web - Konsep Pemrograman InternetPemrograman Web - Konsep Pemrograman Internet
Pemrograman Web - Konsep Pemrograman Internet
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman web
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic Tags
 
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQLPanduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
Panduan Pemrograman Berbasis Web dengan HTML, PHP, dan Database MySQL
 
Introduction to the Internet
Introduction to the InternetIntroduction to the Internet
Introduction to the Internet
 
Bus Booking Management System
Bus Booking Management SystemBus Booking Management System
Bus Booking Management System
 

Similar to Html Ppt (20)

Html Ppt
Html PptHtml Ppt
Html Ppt
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
 
Prabu html
Prabu htmlPrabu html
Prabu html
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
 
Html TAGS
Html TAGSHtml TAGS
Html TAGS
 
Html tag
Html tagHtml tag
Html tag
 
Html intro
Html introHtml intro
Html intro
 
Html intro
Html introHtml intro
Html intro
 
web technology
web technologyweb technology
web technology
 
Tags in html
Tags in htmlTags in html
Tags in html
 
How an html file is structured
How an html file is structuredHow an html file is structured
How an html file is structured
 
AK html
AK  htmlAK  html
AK html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Html part2
Html part2Html part2
Html part2
 
Html part2 (1)
Html part2 (1)Html part2 (1)
Html part2 (1)
 
Htmlppt 100604051515-phpapp01
Htmlppt 100604051515-phpapp01Htmlppt 100604051515-phpapp01
Htmlppt 100604051515-phpapp01
 
Diva
DivaDiva
Diva
 
HTML
HTMLHTML
HTML
 

More from Hema Prasanth

More from Hema Prasanth (6)

Web 2 0 Ppt
Web 2 0 PptWeb 2 0 Ppt
Web 2 0 Ppt
 
Php Ppt
Php PptPhp Ppt
Php Ppt
 
Mysql Ppt
Mysql PptMysql Ppt
Mysql Ppt
 
Linux
Linux Linux
Linux
 
Apache Ppt
Apache PptApache Ppt
Apache Ppt
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 

Recently uploaded

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfUmakantAnnand
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfakmcokerachita
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 

Recently uploaded (20)

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.Compdf
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 
Class 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdfClass 11 Legal Studies Ch-1 Concept of State .pdf
Class 11 Legal Studies Ch-1 Concept of State .pdf
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 

Html Ppt

  • 1.
  • 2. THE HTML TAG <HTML> TAG: Tags are contained in < > symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag. Is usually placed on the first line of your document. At the end of your document you should close with the </html> tag. The <html> tag signals the point where text should start being interpreted as HTML code.
  • 3. THE HEAD TAG Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively. <html> <head> <title>My First HTML Document</title> </head>
  • 4. TITLES A title tag allows you to specify a Document Title in your browser window. When people make hotlists, this title is what they see in their list after they add your document. The format is: <title>My First HTML Document</title> Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.
  • 5. THE BODY TAG Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document. The body should start after the head. A typical page might begin like <html> <head> <title>My First HTML Document</title> </head> <body>
  • 6. HEADERS There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another. <h1>This is a header 1 tag</h1> This is a header 1 tag Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them.
  • 7. PARAGRAPHS In HTML, a paragraph tag <p> should be put at the end of every paragraph of &quot;normal&quot; text (normal being defined as not already having a tag associated with it). <p> causes a line break and adds a trailing blank line <br> causes a line break with no trailing blank line As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.
  • 8. PREFORMATTED TEXT The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font. <pre>this is an example of a preformatted text tag</pre>
  • 9. BOLDFACE AND ITALICS When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.
  • 10. Physical tags This is a <b>boldface</b> tag. This is how boldfacing appears. This is an <i>italic</i> tag. This is how italics appear. Logical tags This is a <strong>strongly emphasized</strong> tag. This is a strongly emphasized tag. This is an <em>emphasized</em> tag. This is an emphasized tag.
  • 11. LISTS There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists. When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.
  • 12. UNNUMBERED LISTS Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. For example, here is an unnumbered list with three items: <ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul>
  • 13. NUMBERED LISTS Here is the same list using a numbered list format: <ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>
  • 14. DEFINITION LISTS Definition lists allow you to indent without necessarily having to use bullets. <dl> <dt> This is a term <dd> This is a definition <dd> And yet another definition <dt> Another term <dd> Another definition </dl>
  • 15. NESTED LISTS Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list). <ul> <li> list item 1 <li> nested item 1 <ul> <li> nested item 2 <li> nested item 1 </ul> <li> nested item 2 </ul> </ul> <li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 3 <ul>
  • 16. BLOCKQUOTE The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this: <blockquote>...</blockquote> and displays like this: Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.
  • 17. CENTER You can center text, images, and headings with the center tag: <center>This is a centered sentence</center> This is a centered sentence. The center tag automatically inserts a line break after the closing center tag.
  • 18. HORIZONTAL RULE To separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows:
  • 19. Addresses The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. <address> Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu </address>
  • 20. COMMENTS It is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document. Comments take the form: <!-----This comment will not appear in the browser----->
  • 21. STRIKE-THROUGH Should you want it, there is a strike-through tag which displays text with a strike. <strike>This is struck through text</strike> displays as This is struck through text
  • 22. SPECIAL CHARACTERS &aacute; .... á &acirc; .... â &aelig; .... æ &agrave; .... à &amp; .... & &aring; .... å &atilde; .... ã &auml; .... ä &ccedil; .... ç &eacute; .... é &ecirc; .... ê &egrave; .... è &eth; .... ð &euml; .... ë &gt; .... > &iacute; .... í &icirc; .... î &igrave; .... ì &iuml; .... ï &lt; .... < &ntilde; .... ñ &oacute; .... ó &ocirc; .... ô &ograve; .... ò &oslash; .... ø &otilde; .... õ &ouml; .... ö &quot; .... &quot; &szlig; .... ß &thorn; .... þ &uacute; .... ú &ucirc; .... û &ugrave; .... ù &uuml; .... ü &yacute; .... ý &yuml; .... ÿ