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

Presentation on html, css

•Download as PPT, PDF•
•

This document discusses HTML and CSS. It provides an overview of HTML, describing it as a markup language used to define web pages using tags. It gives examples of basic HTML tags and page structure. It also covers CSS, explaining that CSS is used to style and lay out HTML elements, including different ways of inserting CSS like inline, internal, and external stylesheets. The document provides examples of HTML code and CSS code.

1 of 24
Representing By: Aamir Sohail Class: RIA Semester: 6th Html and cssHtml and css Department Of Computer ScienceDepartment Of Computer Science Govt Post Graduate College Dargai MalakandGovt Post Graduate College Dargai Malakand
Page  2 HTMLHTML Hypertext Markup Language 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 Each HTML tag describes different document content
Page  3 Markup LanguageMarkup Language Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. HTML is an example of a widely known and used markup language.
Page  4 HTMLHTML HTML documents are described by HTML tags Each HTML tag describes different document content
Page  5 A small HTML document:A small HTML document: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Page  6 Example Explained  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
Page  7 HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: <tag name>content</tag name> 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
Page  8 HTML Page Structure
Page  9 HTML Versions Since the early days of the web, there have been many versions of HTML:
Page  10 Example: Open Notepad Write the below code <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Page  11
Page  12 Save the HTML PageSave the HTML Page Save the file on your computer. Name the file "index.html" or any other name ending with html or htm. You can use either .htm or .html as file extension. There is no difference, it is up to you.
Page  13 View HTML Page in Your BrowserView HTML Page in Your Browser Open the saved HTML file in your favorite browser. To open a file in a browser, double click on the file, or right- click, and choose open with. The result will look much like this:
Page  14
Page  15 CSSCSS
Page  16 CSS Cascading Style Sheets CSS is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look of a web page.
Page  17 CSSCSS Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.
Page  18 CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Page  19 Types of Cascading Style SheetTypes of Cascading Style Sheet There are three ways of inserting a style sheet: i. Inline style ii. Internal style sheet iii.External style sheet
Page  20 Inline Styles/Inline CSSInline Styles/Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of a <h1> element: <h1 style="color:blue;margin-left:30px;">This  is  a heading.</h1>
Page  21 Internal Style SheetInternal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page: Example of Internal Style sheet is on the next slide
Page  22 <head> <style> body {     background-color: linen; } h1 {     color: maroon;     margin-left: 40px; }  </style> </head>
Page  23 External Style SheetExternal Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: <head> <link rel=“stylesheet” type=“text/css href=“style.css /> </head>
24 Thank You !!!

More Related Content

Presentation on html, css

  • 1. Representing By: Aamir Sohail Class: RIA Semester: 6th Html and cssHtml and css Department Of Computer ScienceDepartment Of Computer Science Govt Post Graduate College Dargai MalakandGovt Post Graduate College Dargai Malakand
  • 2. Page  2 HTMLHTML Hypertext Markup Language 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 Each HTML tag describes different document content
  • 3. Page  3 Markup LanguageMarkup Language Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. HTML is an example of a widely known and used markup language.
  • 4. Page  4 HTMLHTML HTML documents are described by HTML tags Each HTML tag describes different document content
  • 5. Page  5 A small HTML document:A small HTML document: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 6. Page  6 Example Explained  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
  • 7. Page  7 HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: <tag name>content</tag name> 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
  • 8. Page  8 HTML Page Structure
  • 9. Page  9 HTML Versions Since the early days of the web, there have been many versions of HTML:
  • 10. Page  10 Example: Open Notepad Write the below code <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 12. Page  12 Save the HTML PageSave the HTML Page Save the file on your computer. Name the file "index.html" or any other name ending with html or htm. You can use either .htm or .html as file extension. There is no difference, it is up to you.
  • 13. Page  13 View HTML Page in Your BrowserView HTML Page in Your Browser Open the saved HTML file in your favorite browser. To open a file in a browser, double click on the file, or right- click, and choose open with. The result will look much like this:
  • 16. Page  16 CSS Cascading Style Sheets CSS is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look of a web page.
  • 17. Page  17 CSSCSS Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.
  • 18. Page  18 CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
  • 19. Page  19 Types of Cascading Style SheetTypes of Cascading Style Sheet There are three ways of inserting a style sheet: i. Inline style ii. Internal style sheet iii.External style sheet
  • 20. Page  20 Inline Styles/Inline CSSInline Styles/Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of a <h1> element: <h1 style="color:blue;margin-left:30px;">This  is  a heading.</h1>
  • 21. Page  21 Internal Style SheetInternal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page: Example of Internal Style sheet is on the next slide
  • 23. Page  23 External Style SheetExternal Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: <head> <link rel=“stylesheet” type=“text/css href=“style.css /> </head>