HTML for Webdesiner

Page 1: Introduction

  • HTML Ebook Version 2.0

  • Updated on 08-Aug-2020

Page 2: Course Offerings

  • Various courses on web technologies available:

    • Web Design Layouts

    • HTML 5 for Beginners

    • JavaScript Essential Course 2020

    • CSS Animation Techniques 2

Page 3: About the Author

  • Author: Learners Hub, B Praveen Kumar

  • Role: Creative Director & Full Stack Developer

  • Note: This is an unofficial, free educational book.

  • Limitation of Liability: No warranties or guarantees regarding accuracy are provided.

  • The book serves as a comprehensive reference.

Page 4: What is HTML?

  • Developed by Tim Berners-Lee in 1990.

  • HTML (HyperText Markup Language) is a client-side markup language, not a programming language.

  • It is used for creating electronic documents called web pages, structured with markup tags.

  • Primarily used for creating static websites.

Page 5: HTML Editors

  • Available HTML editors for coding:

    • Notepad++

    • Atom

    • Adobe Dreamweaver CC

    • Sublime Text

    • Visual Studio Code

  • Basic functionality includes syntax highlighting and code autocompletion.

Page 6: Installing Visual Studio Code

  • Visit: https://code.visualstudio.com/

  • Download based on the operating system.

  • Post-installation: customize settings and extensions as needed.

Page 7: Visual Studio Extensions

  • Useful extensions for Visual Studio Code:

    • Auto Close Tag

    • Tag Renamer

    • CSS Peek

    • Live Server

  • Enhancements for HTML and CSS productivity.

Page 8: Theme Options

  • Available themes for Visual Studio Code:

    • Material Theme

    • Dracula Theme

    • Monokai

Page 9: Basic HTML Structure

  • Structure example:

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style></style>
        <script></script>
        <meta></meta>
    </head>
    <body>
        <!--Content Goes Here-->
    </body>
</html>

  • Elements include <head>, <body>, and others for document setup.

Page 10: HTML Elements Explanation

  • <title>: Displayed on browser tab.

  • <style>: Include CSS styles.

  • <script>: Include JavaScript code.

  • <meta>: Used for SEO.

  • <!DOCTYPE>: Declaration of the version of HTML used.

Page 11: HTML File Handling

  • HTML files should end with .html extension and can be stored anywhere on the computer.

  • Execute HTML files using web browsers (e.g. Chrome, Firefox).

  • HTML tags are case insensitive and enclosed in angle brackets.

Page 12: HTML Elements

  • Elements: Tags with opening and closing pairs containing content. Example: <p>Content</p>.

  • Non-Elements: Self-closing tags without content. Example: <br>, <hr>.

Page 13: HTML Attributes

  • Attributes enhance HTML elements with additional features, defined in the tag. Example: <p align="right">Content</p>.

  • Comments in HTML are written with <!-- Comment --> and not displayed in the browser.

Page 14: HTML Formatting Tags

  • HTML provides formatting tags like:

    • <b>: Bold text

    • <i>: Italic text

  • List Tags: Organize items into lists (Ordered, Unordered, Definition, Nested).

Page 15: Ordered List in HTML

  • Elements grouped as an ordered list using <ol> and <li> tags.

  • Attributes for defining list types (numbers, alphabets, etc.)

Page 16: Unordered List in HTML

  • Elements grouped as an unordered list using <ul> and <li> tags.

  • Various bullet styles available: Disc, Circle, Square.

Page 17: Nested Lists in HTML

  • Define complex lists using lists within lists (e.g., <ol> inside <ul>).

  • Definition lists use <dl>, <dt>, and <dd> for terms and descriptions.

Page 18: Images in HTML

  • Images can be placed using <img src="path" />.

  • Supported formats include .jpg, .jpeg, .png, .gif.

  • Paths:

    • Absolute Path: Accesses images from anywhere (local or external).

    • Relative Path: Accesses images only from the same directory.

Page 19: Image Attributes

  • Attributes for <img>:

    • Width, Height, Alt text.

    • Hspace and Vspace for spacing.

Page 20: Entities in HTML

  • Entities represent special symbols not available on the keyboard:

    • Named Entities: Using names (e.g., © for ©)

    • Numbered Entities: Using ASCII codes (e.g., © for ©)

Page 21: Anchor Tags in HTML

  • Anchor tags <a> are used for creating links.

  • Attributes include:

    • href: Link destination.

    • target: Defines where to open the link.

Page 22: Video in HTML

  • Use <video src="path"></video> to embed videos.

  • Video attributes: Width, Height, Controls, Autoplay, Loop, Poster image.

Page 23: Audio in HTML

  • Use <audio src="path"></audio> for audio playback.

  • Attributes similar to the video tag such as Controls, Muted, Loop.

Page 24: Tables in HTML

  • Table creation tags include:

    • <table>: Main container.

    • <tr>: Table row.

    • <th>: Table header.

    • <td>: Table data cell.

  • Tables help organize data in rows and columns.

Page 25: Table Attributes

  • Attributes for table customization:

    • Align, valign, border, width, bgcolor, cellpadding, and cellspacing.

Page 26: HTML Forms

  • Use forms to collect user data (e.g., registration).

  • Elements include:

    • <form>, <input>, <button>, <textarea>, <label>, and <select>.

Page 27: Form Tags Overview

  • Key form tags explained:

    • <input>: Different types of input fields (text, password, checkbox).

    • <button>: A clickable button.

    • <select>: Drop-down options.

Page 28: Form Attributes

  • Important attributes for <form> tag:

    • action: Where to send data.

    • method: Method type (GET/POST).

Page 29: Input Types in Forms

  • Various input types in Forms:

    • text, password, file, checkbox, etc.

Page 30: Input Attributes

  • Common attributes for input fields:

    • name, maxlength, checked, id, etc.

Page 31: Textarea Tag

  • <textarea> tag for multi-line text input.

  • Attributes include rows, cols, and name.

Page 32: Select Tag

  • <select> tag for creating drop-down lists.

  • Attributes for multiple selections.

Page 33: New HTML5 Input Types

  • HTML5 introduced new input types:

    • Email, Date, Color, etc.

  • Improves interactivity in forms.

Page 34: New HTML5 Tags

  • Tag list for HTML5 with descriptions:

    • <article>: Defines an article.

    • <aside>: Loosely related content.

    • <details>: For additional information.

Page 35: More HTML5 Tags

  • Additional new tags with functions such as <mark>, <progress>, and <canvas>, among others.

Page 36: Canvas in HTML5

  • The <canvas> element enables dynamic graphics drawing using JavaScript.

  • Default size is 300px width and 150px height.

Page 37: SVG in HTML5

  • SVG (Scalable Vector Graphics): XML-based format for vector graphics.

  • Advantages include scalability without quality loss.

Page 38: SVG Advantages

  • Benefits of using SVG:

    • Searchable, indexable, and modifiable with JavaScript.

    • High-quality prints at any resolution.

Page 39: Differences Between SVG and Canvas

  • SVG: Vector-based, part of DOM.

  • Canvas: Raster-based, single DOM element.

  • Usage scenarios differ based on graphic complexity and performance needs.

Page 40: Web Storage in HTML5

  • Web storage allows local data saving without sending to the server like cookies.

  • Types include sessionStorage and localStorage.

Page 41: Local Storage

  • Local storage is permanent, key/value pairs stored indefinitely until cleared.

Page 42: sessionStorage

  • Session storage is temporary, data lasts until the tab or window is closed.

Page 43: Application Cache

  • Allows offline access to resources, enhancing web app usability.

Page 44: Geolocation

  • HTML5 geolocation determines user's geographic location.

Page 45: Getting Visitor's Coordinates

  • Using navigator.geolocation methods to get position and track movement.

Page 46: Server-Sent Events (SSE)

  • Enables long-term communication between web pages and servers for streaming data.

Page 47: Events Overview

  • Creating an EventSource for listening to server messages.

Page 48: HTML5 Drag and Drop

  • Allows elements to be dragged and dropped within the webpage.

Page 49: Drag Events

  • Events that occur during a drag and drop operation:

    • ondragstart, ondrag, ondragend, ondrop.