Recomendados
Mais conteúdo relacionado
Semelhante a html css intro sanskar , saurabh.pptx
Semelhante a html css intro sanskar , saurabh.pptx (20)
Último
Último (20)
html css intro sanskar , saurabh.pptx
- 1. fu Basic Introduction to : HTML & CSS Presented by – 1. Sanskar Dubey 2. Saurabh Singh Fundamentals of Computer & Programming TOPIC - Presented to – Mr. Gaurav Dwivedi sir 1
- 2. 2 Table Of Contents – • History & Why HTML and CSS • HTML Introduction • WEB PAGE • HTML Basic Tags and Attributes • CSS Introduction • INLINE Stylesheets • INTERNAL Stylesheets • EXTERNAL Stylesheets
- 3. 3 A Brief History and Some Common Quetions – • WHY HTML and CSS ? • Use of it ? • Hard or easy to learn ? • How to use ? • Safe or not ?
- 4. • Tim Berners-Lee. • HTML stands for Hyper Text Markup Language. • HTML is not a programming language. • BUT it is a formatting language. • Used in developing Web Pages 4
- 5. • Web Page can be further divided into :- • Structure-What the different part of content are and how they are related. • Presentation-How the content should be displayed and formatted Visually. • . • HTML is used to maintain STRUCTURE of the document. • CSS is used to maintain PRESENTATION of the document. 5
- 6. • HTML Tags<> • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • 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, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags • HTML Elements • HTML element is everything between the start tag and the end tag, including the tags. • HTML Element: <p>This is a paragraph.</p> 6
- 7. Sample Program <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> OUTPUT:- 7
- 8. • <head></head>: Do not contains any data to be displayed in Content area of web page. Contains vital info about page and other tags. • <title></title>: Defines a title in the browser toolbar. • <style></style>: To define style information for an HTML document. • Etc… 8
- 9. • Heading Tag: It is used to give different headings in the document. • These are from <h1> to <h6>.. 9
- 10. • <p> Paragraph </p> • Unordered list: • Ordered List: • o <a href=“ abc.c m”>ABC</a> • Used to create hyperlinks. • <table border="1"> //To make a table <tr> //table row <th>Month</th> //column heading <th>Savings</th> </tr> <tr> <td>January</td> // definition <td>$100</td> </tr></table> Month Savings January $100 February $80 10
- 11. • CSS stands for Cascading Style Sheets. • Styles define how to display HTML elements. • CSS is used to manage the PRESENTATION part of the web page. • CSS separates HTML part from presentation part. 11
- 12. 12 • Pages download faster, sometimes by as much as 50%. • You have to type less code, and your pages are shorter and neater. • Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often. CSS - INTRODUCTION
- 13. • Three ways to implement CSS in a page are:- • Internal Stylesheet • External Style Sheet (BEST APPROACH) • Inline Style Sheet 13
- 14. • Inline Stylesheets • To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. • Ex. • <p style="color:blue;margin-left:20px">This is a paragraph.</p> 14
- 15. • Internal Stylesheets • An internal style sheet should be used when a single document has a unique style. It is embedded generally inside the <head> tag • Ex. <head><style type="text/css"> p {margin-left:20px;></style></head> 15
- 16. • External Stylesheets An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire Web site by changing one file. • An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet should be saved with a .css extension. • Ex. <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> 16
- 17. 17 ASK YOUR DOUBTS NOW IF ANY