More Related Content
What's hot (20)
Similar to Presentation on html, css (20)
More from Aamir Sohail (7)
Recently uploaded (20)
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>
- 11. Page 11
- 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:
- 14. Page 14
- 15. Page 15 CSSCSS
- 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>
- 24. 24 Thank You !!!