1 / 22

Comprehensive Guide to HTML Basics: Structure, Tags, and Best Practices

Dive into the essentials of HTML with this comprehensive guide. Learn about the fundamental structures, including elements and attributes, the importance of proper nesting, and the differentiation between single and start/end commands. Get insights into the correct usage of headings, paragraphs, and lists, along with how to handle special characters. Discover best practices for setting up your HTML pages using tools like Komodo, ensuring validation, and implementing effective formatting. This resource is perfect for beginners and anyone looking to refine their HTML skills.

chessa
Télécharger la présentation

Comprehensive Guide to HTML Basics: Structure, Tags, and Best Practices

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. HTML: Pages and Tools

  2. HTML redux

  3. HTML Tags < tag-name [attribute-name=value]> </tag-name> • No attributes on end tag • Blank lines and spaces don’t matter

  4. Two types of commands Start/end commands <command> ... </command> Single commands < command> or < command />

  5. Important Difference Whether they start a new line or not • Paragraphs do • Emphasize does not

  6. The Basics • Regular text = paragraph • Heading numbers represent style, not order • Lists consist of list delimiters and list items

  7. Correctly Nested Tags • Some can take any content • divisions, footers • Some have restrictions • Paragraphs can not have lists inside them • Some tags are limited as to where they can appear • List items can only appear in lists • Incorrectly nested tags MAY appear to work

  8. Special Characters

  9. Special symbols • < and > are special symbols with special meanings How would you display A < B ? Suggestions? • &lt; for < and &gt;for > & is an escape symbol, handled specially. Always ends with ; • Means that you need a special way to display “&” too: &amp; • Full lists on Resources page

  10. HTML tools

  11. A better editor Understands commands Gives suggestions Recognizes mistakes Creates an appropriate file Easy to see results Help save them in the right place

  12. Setting Up Komodo • Creating a page • Viewing the page • Komodo • Chrome • Creating a project • Clean up your folder

  13. General Page Structure <!DOCTYPE html> <html> <head> <! --- what shows up on the tab --- > <title>Put your title here</title> <! ---defining character necessary for validation --- > <meta charset="UTF-8"> </head> <body> <! --- the “good stuff” i--- > What will appear on the page <footer> Created by A. Person on a date </footer> </body> </html>

  14. The Body • Every page needs • Header (DIFFERENT THAN head) • Content • Footer • Minimal content • Header: title • Footer: who wrote it and when

  15. Filezillaredux

  16. Post your page • Clean up your folder • Check before you submit • Named correctly? • Correct HTML?

  17. How do you know? • Validation • http://validator.w3.org/

  18. Helping yourself

  19. Formatting your SOURCE • Comments <!-- any text you want --> • Indentation • Nested parentheses • Multi-line • Line up start and end • Things inside belong one tab over • Single line • Start, content, end on a single line • Always include your name in date in every file

  20. Formatting Help • http://www.freeformatter.com/html-formatter.html

  21. Do I have to do ALL that?

More Related