🖥️

Draft CAD: Introduction to HTML Lecture Notes

Jul 10, 2024

Draft CAD: Introduction to HTML

Introduction

  • Instructor: Mike
  • Course Focus: Introduction to HTML for creating web pages.
  • HTML (Hypertext Markup Language): Language used to create almost all web pages.
  • HTML Tags: Define the layout, look, and feel of a website.

Benefits of Learning HTML

  • HTML is easier to learn than many people think.
  • Building Custom Websites: Encourages hands-on experience rather than relying on content management systems.
  • Career Advantage: HTML skills can be beneficial on resumes.

Choosing a Text Editor for HTML

  • HTML Files: Similar to text files but with .html extension.
  • Text Editors: Simple programs to write HTML code.
  • Recommendations:
    • Simple Editors: Notepad (Windows), TextEdit (Mac) – best for beginners.
    • Advanced Editors: Atom, Sublime, Brackets, WebStorm – offer more features but can be more complex.
  • Example:
    • TextEdit: Basic, no configuration needed.
    • Atom: More features, customizable themes.
  • Advice: Start with simple text editors, move to advanced ones as you become more comfortable.

Creating Your First HTML File

  • Steps:
    1. Create a project folder.
    2. Create an index.html file (default home page).
    3. Open the file in a text editor.
    4. Write basic HTML code.
  • Basic HTML Structure:
    • <!DOCTYPE html>: Document type declaration.
    • <html>: Root container for HTML content.
    • <head>: Contains meta-information, title, and links to resources.
    • <body>: Contains the content displayed on the web browser.
  • Example: <!DOCTYPE html> <html> <head> <title>Mike's Website</title> </head> <body> Hello, world! </body> </html>
  • Parent-Child Relationships: Tags within tags are referred to as parent (container) and child.

Adding Basic HTML Tags

  • Meta Tag: Defines metadata (e.g., character encoding).
  • Header Tags (H1-H6): Define headings, with <h1> being the largest.
  • Paragraph Tag (<p>): Defines a paragraph.
  • Formatting Tags:
    • Bold (<b>): Makes text bold.
    • Italics (<i>): Makes text italicized.
    • Combination: Can nest formatting tags.
  • New Line (<br>): Adds a line break within text.
  • Horizontal Rule (<hr>): Adds a horizontal line to separate content.
  • Big and Small Tags (<big>, <small>): Alter the size of text.
  • Subscript and Superscript Tags (<sub>, <sup>): For scientific notation, math, etc.

Using Comments in HTML

  • Syntax: <!-- comment -->
  • Purpose: Explain code, hide sections of code from browser.
  • Best Practices: Use sparingly, let HTML speak for itself.

Styling and Colors

  • Style Attribute: Allows inline styling.
    • Syntax: <tag style='property: value;'>.
  • Common Properties:
    • Color (color): Changes text color.
    • Background Color (background-color): Changes background color.
  • CSS Considerations: For more complex styling, learn CSS.

Structuring Content with HTML Tags

  • Basic Page Sections:
    • Header (<header>): Top section, navigation menu, branding.
    • Main (<main>): Main content of the page.
    • Footer (<footer>): Bottom section, additional links, social media.
  • Navigation Tags (<nav>): For navigational elements.
  • Article Tags (<article>): For self-contained content, like blog posts.
  • Section Tags (<section>): Divide content into thematic groups.
  • Aside Tags (<aside>): For content related, but not essential to main content.

Creating Links in HTML

  • Anchor Tag (<a>): Creates a link.
    • Syntax: <a href='url'>Link Text</a>.
  • Attributes:
    • Target (target='_blank'): Opens link in a new tab.
    • Link to local files: Relative URLs, e.g., page2.html.
  • Linking to Media: Images, PDFs, other documents._

Adding Images to Your Website

  • Image Tag (<img>): Embeds an image.
    • Attributes:
      • Source (src): Path to the image.
      • Alt (alt): Text alternative if the image cannot be displayed.
      • Width/Height: Control image size.
  • Best Practices:
    • Use relative paths for local images.
    • Maintain proper aspect ratios.
    • Include descriptive alt text for accessibility.

Embedding Videos

  • Video Tag (<video>): Embeds a video.
    • Attributes:
      • Source (src): Path to the video file.
      • Controls: Adds video controls (play, pause, etc.).
      • Autoplay: Automatically starts the video.
      • Loop: Repeats the video.
      • Poster: Sets a custom thumbnail.
  • Embedding YouTube Videos: Use <iframe> tag with YouTube embed code.

Creating Lists

  • Unordered List (<ul>): Items with no specific order.
    • Item Tag (<li>): Defines each item in the list.
  • Ordered List (<ol>): Numbered items, specific order.
    • Attributes: Change list style (numbers, letters, Roman numerals).
  • Description List (<dl>): Terms with definitions.
    • Description Term (<dt>): Term name.
    • Description (<dd>): Term description.

Creating Tables

  • Table Tag (<table>): Starts a table.
    • Table Row (<tr>): Defines a row.
    • Table Data (<td>): Defines a cell.
    • Table Header (<th>): Defines a header cell.
    • Table Head (<thead>): Groups the header content.
    • Table Body (<tbody>): Groups the body content.
  • Attributes:
    • Colspan: Specifies the number of columns the cell should span.
    • Caption (<caption>): Title for the table.

Using Divs and Spans

  • Div Tag (<div>): Block-level container.
  • Span Tag (<span>): Inline container.
  • Use Cases: Grouping elements for styling and layout purposes.

Input Tags

  • Text Inputs (<input type='text'>): Single-line text input.
  • Password Inputs (<input type='password'>): Hides text.
  • Text Area (<textarea>): Multi-line text input.
  • Other Input Types: file, range, checkbox, radio, submit.
  • Attributes: Default values, sizes, etc.
  • Forms (<form>): Groups multiple input elements.

Using Iframes

  • Iframe Tag (<iframe>): Embeds another web page within the current page.
    • Attributes: src, width, height, frameborder.
  • Limitations: Some websites restrict embedding.

Meta Tags

  • Purpose: Metadata about a web page.
  • Common Meta Tags:
    • Charset: Character encoding.
    • Description: Page description for search engines.
    • Keywords: Keywords for search engines.
    • Viewport: Controls layout on mobile devices.

Conclusion

  • HTML Basics: Building blocks for web development.
  • Practice: Experiment by building your own web pages.

Full transcript