1 / 26

Introduction to HTML & CSS

Introduction to HTML & CSS. What is HTML. H yper T ext M arkup L anguage 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. .

sana
Télécharger la présentation

Introduction to HTML & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML & CSS

  2. 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.

  3. 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.

  4. 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

  5. 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>

  6. 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 pairs Eg: <div id=“container” style=“background:#000;”></div> <imgsrc=“test.jpg” alt=“sample” width=“200” height=“200” />

  7. Essential tags • <html> • <title> • <head> • <body> • <link type=“” rel=“” href=“” > • <script type=“” src=“”> • <style>

  8. Basic Structure of a HTML document <html> <title>Page title</title> <head></head> <body> ****Content comes here**** </body> </html>

  9. 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.

  10. Some important tags • <h1> to <h6>-Headings • <p> - Paragraphs • <a href=“”> Anchor tag – links • <imgsrc=“”> – 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 form Note that the <img> and <input> do not have closing tags

  11. Some important tags • <table> creates a table • <tr> - table row • <td> - table cell • <br> - break line • <hr> - horizontal line

  12. 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.

  13. Adding CSS to HTML CSS can be added to HTML in the following ways: • Inline - using the style attribute in HTML elements • Internal - using the <style> element in the <head> section • External - using an external CSS file • The preferred way to add CSS to HTML, is to put CSS syntax in external CSS files.

  14. 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.

  15. 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

  16. 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:

  17. Style priority • Inline style • Internal style sheet • External style sheet Decreasing Priority • !important – used with a style attributes to override other style attributes assigned to an element

  18. CSS Syntax h1 {color:#09C;font-family:Helvetica;} Selector Property Value Property Value

  19. CSS Selectors • They allow authors to target specific HTML elements so that they can be styled.

  20. Type selector The type selector is written using the element type only. Atypeselector selects every instance of the element type regardless of their position in the document tree.

  21. 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.

  22. 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.

  23. 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.

  24. 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.

More Related