introduction to html & css. what is html hyper text markup language it is a markup language used...
TRANSCRIPT
![Page 1: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/1.jpg)
Introduction to HTML & CSS
![Page 2: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/2.jpg)
What is HTML
Hyper Text Markup Language• It is a markup language used to create the
content and semantic structure of Web pages. • A Web page is comprised of a number of
HTML elements, each of which has a particular meaning in the context of a Web page.
![Page 3: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/3.jpg)
Web Browsers
• The purpose of a web browser (Chrome, Internet Explorer, Firefox) is to read HTML documents and display them as web pages.
• The browser does not display the HTML tags, but uses these tags to interpret the content of the page.
![Page 4: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/4.jpg)
![Page 5: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/6.jpg)
HTML Elements
• An HTML element is everything between the start tag and the end tag, including the tags:
• HTML Element: <h1>This is a heading</h1>
![Page 7: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/7.jpg)
Element Attributes
• HTML elements can have attributes, which provide additional information/usage
• Attributes are always specified in the start tag• Attributes come in name/value pairsEg:<div id=“container” style=“background:#000;”></div>
<img src=“test.jpg” alt=“sample” width=“200” height=“200” />
![Page 8: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/8.jpg)
Essential tags
• <html>• <title>• <head> • <body>• <link type=“” rel=“” href=“” >• <script type=“” src=“”>• <style>
![Page 9: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/9.jpg)
Basic Structure of a HTML document
<html><title>Page title</title>
<head></head> <body>
****Content comes here**** </body>
</html>
![Page 10: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/10.jpg)
Deprecated Tags and Attributes
• In HTML 4, several deprecated tags and attributes were used to style documents. These tags are not supported in HTML 5.
• Avoid using the elements <font>, <center>, and <strike> and the attribute bgcolor.
![Page 11: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/11.jpg)
Some important tags• <h1> to <h6>-Headings• <p> - Paragraphs• <a href=“”> Anchor tag – links• <img src=“”> – adding images• <div> -adding divisions, basically used for layout
and with CSS• <input type=“”> - checkboxes, text-area, submit
buttons, radio,etc.• <form> - creating a HTML formNote that the <img> and <input> do not have closing tags
![Page 12: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/12.jpg)
Some important tags
• <table> creates a table• <tr> - table row• <td> - table cell• <br> - break line• <hr> - horizontal line
![Page 13: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/13.jpg)
CSS
Cascading Style Sheets• Styles define how to display HTML elements.• CSS was introduced together with HTML 4, to
provide a better way to style HTML elements.
![Page 14: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/14.jpg)
Types of style sheets
Browser style sheets (default) User style sheets
Author style sheets
Inline
Internal
External
![Page 15: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/15.jpg)
Adding CSS to HTML
CSS can be added to HTML in the following ways:
1. Inline - using the style attribute in HTML elements
2. Internal - using the <style> element in the <head> section
3. External - using an external CSS file• The preferred way to add CSS to HTML, is to put
CSS syntax in external CSS files.
![Page 16: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/16.jpg)
Inline Styles
• An inline style can be used if a unique style is to be applied to one single occurrence of an element.
• To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property.
![Page 17: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/17.jpg)
Internal Style Sheets
• An internal style sheet can be used if one single document has a unique style.
• Internal styles are defined in the <head> section of an HTML page, by using the <style> tag
![Page 18: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/18.jpg)
External style sheets• External style sheets enable you to change the appearance
and layout of all the pages in a Web site, just by editing one single file!
• Saved in .css extension• Each page must link to the style sheet using the <link> tag:
![Page 19: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/19.jpg)
Style priority
1. Inline style2. Internal style sheet3. External style sheet
Decreasing Priority
!important – used with a style attributes to override other style attributes assigned to an element
![Page 20: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/20.jpg)
CSS Syntax
h1 {color:#09C;font-family:Helvetica;}
Selector Property Value Property Value
![Page 21: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/21.jpg)
CSS Selectors
• They allow authors to target specific HTML elements so that they can be styled.
![Page 22: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/22.jpg)
Type selector
The type selector is written using the element type only.
A type selector selects every instance of the element type regardless of their position in the document tree.
![Page 23: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/23.jpg)
ID & Class
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
• The id selector is used to specify a style for a single, unique element.
• The class selector is used to specify a style for a group of elements.
![Page 24: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/24.jpg)
ID Selectors
• The id selector is written using a “#” followed by the id value.
• Note: Class values are case-sensitive. Browsers will interpret “a” and “A” differently.
![Page 25: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/25.jpg)
Class Selectors
• The class selector is written using a “.” followed by the class value.
• Note: Class values are case-sensitive. Browsers will interpret “a” and “A” differently.
![Page 26: Introduction to HTML & CSS. What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages](https://reader035.vdocuments.site/reader035/viewer/2022081422/551a9824550346761a8b5b9d/html5/thumbnails/26.jpg)
Class Selectors
• You can also combine type and class selectors to isolate specific instances of an element. For example:
• This means that only paragraphs with a class of “big” will be selected.