Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Computer fundamentals-internet p2

•Download as PPTX, PDF•
•
L
Leo Mark Villar

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML uses tags to mark up elements within web pages to indicate their semantic structure. Common tags are used to define headings, paragraphs, links, images, and more. Web browsers read HTML files and display the pages according to the tags.

1 of 28
Computer Fundamentals & Internet Part 2
What is HTML?  HTML is a markup language for describing web documents (web pages).  HTML stands for Hyper Text Markup Language  A markup language is a set of markup tags  HTML documents are described by HTML tags  Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).  Each HTML tag describes different document content
How does it Work?  HTML consists of a series of short codes typed into a text-file by the site author (tags)  The text is then saved as a html file  Viewed through a browser  Browser reads the file and translates the text into a visible form
HTML example • The DOCTYPE declaration defines the document type to be HTML • The text between <html> and </html> describes an HTML document • The text between <head> and </head> provides information about the document • The text between <title> and </title> provides a title for the document • The text between <body> and </body> describes the visible page content • The text between <h1> and </h1> describes a heading • The text between <p> and </p> describes a paragraph
Sample Output
HTML Tags  HTML tags are keywords (tag names) surrounded by angle brackets:  HTML tags normally come in pairs like <p> and </p>  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, but with a slash before the tag name
Web Browsers Microsoft Internet Explorer Mozilla Firefox Microsoft Edge Google Chrome Apple Safari
Web Browsers  The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.  The browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
The <!DOCTYPE> Declaration  The <!DOCTYPE> declaration helps the browser to display a web page correctly.  There are different document types on the web.  To display a document correctly, the browser must know both type and version.  The doctype declaration is not case sensitive. All cases are acceptable:
Common Declarations
HTML Versions
HTML Editors  Notepad  TextEdit  Microsoft WebMatrix  Sublime Text  Adobe Dreamweaver
HTML Elements  HTML documents are made up by HTML elements.  HTML elements are written with a start tag, with an end tag, with the content in between:  The HTML element is everything from the start tag to the end tag:
Nested HTML Elements  HTML elements can be nested (elements can contain elements).  All HTML documents consist of nested HTML elements.  This example contains 4 HTML elements:
Don’t forget the End Tag  Some HTML elements will display correctly, even if you forget the end tag: The example above works in all browsers, because the closing tag is considered optional. Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
Empty HTML Elements  HTML elements with no content are called empty elements.  <br> is an empty element without a closing tag (the <br> tag defines a line break).  Empty elements can be "closed" in the opening tag like this: <br />.
HTML Attributes  Attributes provide additional information about HTML elements.  HTML elements can have attributes  Attributes provide additional information about an element  Attributes are always specified in the start tag  Attributes come in name/value pairs like: name="value"
The title Attribute the <p> element has a title attribute. The value of the attribute is "About W3Schools"
The href Attribute  HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Size Attribute  HTML images are defined with the <img> tag.  The filename of the source (src), and the size of the image (width and height) are all provided as attributes:  The image size is specified in pixels: width="104" means 104 screen pixels wide.
The alt Attribute  The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
Recommendations  Always Use Lowercase Attributes  Always Quote Attribute Values This will not display correctly, because it contains a space
Single or Double Quotes?  Double style quotes are the most common in HTML, but single style can also be used.  In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:  Or vice versa:
HTML Attributes - Summary  All HTML elements can have attributes  The HTML title attribute provides additional "tool-tip" information  The HTML href attribute provides address information for links  The HTML width and height attributes provide size information for images  The HTML alt attribute specifies an alternative text to be used, when an image cannot be displayed
HTML Headings  Headings are defined with the <h1> to <h6> tags.  <h1> defines the most important heading. <h6> defines the least important heading.  Browsers automatically add some empty space (a margin) before and after each heading.
HTML Headings • Use HTML headings for headings only. Don't use headings to make text BIG or bold. • Search engines use your headings to index the structure and content of your web pages. • Users skim your pages by its headings. It is important to use headings to show the document structure. • h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.
HTML Horizontal Rules  The <hr> tag creates a horizontal line in an HTML page.  The hr element can be used to separate content:

More Related Content

Computer fundamentals-internet p2

  • 2. What is HTML?  HTML is a markup language for describing web documents (web pages).  HTML stands for Hyper Text Markup Language  A markup language is a set of markup tags  HTML documents are described by HTML tags  Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).  Each HTML tag describes different document content
  • 3. How does it Work?  HTML consists of a series of short codes typed into a text-file by the site author (tags)  The text is then saved as a html file  Viewed through a browser  Browser reads the file and translates the text into a visible form
  • 4. HTML example • The DOCTYPE declaration defines the document type to be HTML • The text between <html> and </html> describes an HTML document • The text between <head> and </head> provides information about the document • The text between <title> and </title> provides a title for the document • The text between <body> and </body> describes the visible page content • The text between <h1> and </h1> describes a heading • The text between <p> and </p> describes a paragraph
  • 6. HTML Tags  HTML tags are keywords (tag names) surrounded by angle brackets:  HTML tags normally come in pairs like <p> and </p>  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, but with a slash before the tag name
  • 7. Web Browsers Microsoft Internet Explorer Mozilla Firefox Microsoft Edge Google Chrome Apple Safari
  • 8. Web Browsers  The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.  The browser does not display the HTML tags, but uses them to determine how to display the document:
  • 10. The <!DOCTYPE> Declaration  The <!DOCTYPE> declaration helps the browser to display a web page correctly.  There are different document types on the web.  To display a document correctly, the browser must know both type and version.  The doctype declaration is not case sensitive. All cases are acceptable:
  • 13. HTML Editors  Notepad  TextEdit  Microsoft WebMatrix  Sublime Text  Adobe Dreamweaver
  • 14. HTML Elements  HTML documents are made up by HTML elements.  HTML elements are written with a start tag, with an end tag, with the content in between:  The HTML element is everything from the start tag to the end tag:
  • 15. Nested HTML Elements  HTML elements can be nested (elements can contain elements).  All HTML documents consist of nested HTML elements.  This example contains 4 HTML elements:
  • 16. Don’t forget the End Tag  Some HTML elements will display correctly, even if you forget the end tag: The example above works in all browsers, because the closing tag is considered optional. Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
  • 17. Empty HTML Elements  HTML elements with no content are called empty elements.  <br> is an empty element without a closing tag (the <br> tag defines a line break).  Empty elements can be "closed" in the opening tag like this: <br />.
  • 18. HTML Attributes  Attributes provide additional information about HTML elements.  HTML elements can have attributes  Attributes provide additional information about an element  Attributes are always specified in the start tag  Attributes come in name/value pairs like: name="value"
  • 19. The title Attribute the <p> element has a title attribute. The value of the attribute is "About W3Schools"
  • 20. The href Attribute  HTML links are defined with the <a> tag. The link address is specified in the href attribute:
  • 21. Size Attribute  HTML images are defined with the <img> tag.  The filename of the source (src), and the size of the image (width and height) are all provided as attributes:  The image size is specified in pixels: width="104" means 104 screen pixels wide.
  • 22. The alt Attribute  The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
  • 23. Recommendations  Always Use Lowercase Attributes  Always Quote Attribute Values This will not display correctly, because it contains a space
  • 24. Single or Double Quotes?  Double style quotes are the most common in HTML, but single style can also be used.  In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:  Or vice versa:
  • 25. HTML Attributes - Summary  All HTML elements can have attributes  The HTML title attribute provides additional "tool-tip" information  The HTML href attribute provides address information for links  The HTML width and height attributes provide size information for images  The HTML alt attribute specifies an alternative text to be used, when an image cannot be displayed
  • 26. HTML Headings  Headings are defined with the <h1> to <h6> tags.  <h1> defines the most important heading. <h6> defines the least important heading.  Browsers automatically add some empty space (a margin) before and after each heading.
  • 27. HTML Headings • Use HTML headings for headings only. Don't use headings to make text BIG or bold. • Search engines use your headings to index the structure and content of your web pages. • Users skim your pages by its headings. It is important to use headings to show the document structure. • h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.
  • 28. HTML Horizontal Rules  The <hr> tag creates a horizontal line in an HTML page.  The hr element can be used to separate content: