Download to read offline
More Related Content
![Day 2 - Web_Development [basic HTML tags and their functionalities].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/day2-webdevelopmentbasichtmltagsandtheirfunctionalities-240906194136-26a4ba6f-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Lecture3-Intro to HTMLLecture3-Intr.pptx
Lecture3-Intro to HTMLLecture3-Intr.pptx
- 1.
- 2. What is HTML? ●HTML is the standard markup language for creating Web pages. ● HTML stands for Hyper Text Markup Language ● HTML describes the structure of Web pages using markup ● HTML elements are the building blocks of HTML pages ● HTML elements are represented by tags ● HTML tags label pieces of content such as "heading", "paragraph", "table",... ● Browsers do not display the HTML tags, but use them to render the content of the page
- 3. An Example A paragraphis your content Putting your content into an HTML tag to make it look like a paragraph is structure <p>This is the content</p>
- 4. HTML Elements andTags An element is an individual component of HTML - paragraph, image, header,... - an element name indicates its purpose: p for paragraph A tag marks the beginning and the end of an HTML element - Opening tag and Closing Tag <tagname>Stuff in the middle</tagname>
- 5.
- 6. Anatomy of anHTML element Container Element - An element that can contain other elements or content - A paragraph (<p>content</p>) contains text Stand Alone Element - An element that cannot contain anything else - <br/>, <img/>
- 7. Anatomy of anHTML element Attribute - Provides additional information about the HTML element - Class, ID, language, style, identity, source - Placed inside an opening tag, before the right angle bracket. Value - Value is the value assigned to a given attribute. - Values must be contained inside quotation marks. <img src="my_picture.jpg" />
- 8. HTML Page Structure <!DOCTYPEhtml> <html> </html> <head> </head> <title>My title</title> <body> <h1>My heading</h1> <p>My paragraph</p> <img src="my_src">My image </body>
- 9. <!DOCTYPE> The <!DOCTYPE> declarationrepresents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <!DoCtYpE> declaration is not case sensitive. The <!DOCTYPE> declaration for HTML5 is <!DOCTYPE html>
- 10. <html>,<head>,<body> After <!doctype>, thepage content must be contained between <html> tags. The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines. The body contains the actual content of the page. Everything that is contained in the body is visible to the user. (Some Exceptions!)
- 11. Let's create ourfirst HTML page open a new file in your text editor and copy this code in it: <!DOCTYPE html> <html> <head> <title>Title of the page </title> </head> <body> The page content here. </body> </html> save the document as myfirstpage.html and open it with a browser.
- 12. Nesting All elements "nest"inside one another Nesting is what happens when you put tags inside other containing tags. For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body> <body> <p>The paragraph goes here.</p> </body> Whichever element OPENS first CLOSES last
- 13. Headings HTML headings aredefined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading <h1>This is heading 1</h1> This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6
- 14. Paragraphs HTML paragraphs aredefined with the <p> tag: <p>This is a paragraph</p> <p>Paragraph 2</p>
- 15. The Poem Problemand Line Breaks This poem will display in a single line: <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> The <br> element defines a line break without starting a new paragraph. <p> My Bonnie lies over the ocean. <br> My Bonnie lies over the sea. <br> My Bonnie lies over the ocean. <br> Oh, bring back my Bonnie to me. </p> The browser will remove any extra spaces and extra lines when the page is displayed
- 16. Preformatted Text The HTML<pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> This will be shown correctly with line breaks preserved.
- 17. Formatted Text <p> Here isa paragraph with <em>emphasized</em> text and <strong>important</strong> text. </p> <p> Here is another paragraph with <i>Italic</i> text and <b>Bold</b> text. </p> Here is a paragraph with Emphasized text and Important text. Here is another paragraph with Italic text and Bold
- 18. Formatted Text <p>Here isa <mark>highlighted</mark> text and this is <small>smaller</small> text.</p> Highlighte d Here is a text and this is smaller text. <p>Here is <del>some deleted</del> text and this is <ins>some inserted</ins> text.</p> Here is some deleted text and this is some inserted text. <p>This is <sup>superscripted</sup> text and this is <sub>subscripted</sub> text.</p> Here is superscripted text and this is subscripted text.
- 19. Character Codes Many mathematical,technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use an HTML entity name or code. One character that I use most is See here for a complete list
- 20. Links HTML links aredefined with the <a> tag The link's destination is specified in the href attribute. target attribute specifies where to open the linked document(_self,_blank,...) <a href="http://www.google.com" target="_blank">This is a link to Google!</a> This is a link to Google!
- 21. Images HTML images aredefined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes. <img src="fsu-logo.jpg" alt="FSU Logo" width="104" height="142">
- 22. Relative vs. Absolutepaths for links & Images Relative paths change depending upon the page the link is on - Links within the same directory need no path information. "filename.jpg" - Subdirectories are listed without preceding slashes. "img/filename.jpg" Absolute paths refer to a specific location of a file, including the domain - Typically used when pointing to a link that is not within your own domain. - http://one.fsu.edu/alumni/image/community/clubs/FSU-Seal-full-color .jpg
- 23. Lists Unordered list (bullets) ● ListItem ● Another List Item Ordered list (sequence) 1. List Item 2. Another List Item <ul> <li>List Item</li> <li>Another List Item</li> </ul> <ol> <li>List Item</li> <li>Another List Item</li> </ol>
- 24. Lists Lists are usedeverywhere and can be customized to look as you want
- 25. Tables Tables are away to represent complex information in a grid format. Tables are made up of rows and columns. <table> <tr> < t h > H e a d < / t h > < t h >
- 26. Tables Tables can bestyled with CSS to add zebra striping or to highlight important rows/columns. Extra functionality can be added to tables like filtering or sorting rows and columns.
- 27. Comments You can addcomments to your code that will not be seen by the browser, but only visible when viewing the code. Comments can be used to: - organize your code into sections - 'comment out' large chunks of code to hide it from the browser. <!-- Beginning of header --> <div id="header">Header Content </div> <!-- End of header -->