Scribd
Upload
2 views4 pages

Web Design Using HTML Unit - 2

The document outlines the essentials of HTML development, including the setup of development environments, types of HTML editors, and the importance of testing webpages in various browsers. It details the basic structure of an HTML document, the significance of metadata for SEO, and the necessary software and hardware requirements for HTML development. Additionally, it highlights the advantages of using HTML editors and browser extensions for developers.

Uploaded by

e20013291
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views4 pages

Web Design Using HTML Unit - 2

The document outlines the essentials of HTML development, including the setup of development environments, types of HTML editors, and the importance of testing webpages in various browsers. It details the basic structure of an HTML document, the significance of metadata for SEO, and the necessary software and hardware requirements for HTML development. Additionally, it highlights the advantages of using HTML editors and browser extensions for developers.

Uploaded by

e20013291
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

UNIT 2: HTML Development

Environment and HTML Structure


1. HTML Development Environment
An HTML development environment is a setup of tools that helps developers create, edit,
test, and manage web pages efficiently.

Integrated Development Environment (IDE): Software that provides tools for writing,
testing, and debugging code in one place.
Benefits:
- Easy code writing
- Live preview
- Project management
- Faster debugging
- Improved productivity
Examples: Notepad++, Visual Studio Code, Sublime Text, Atom, Adobe Dreamweaver,
WebStorm

2. Types of HTML Editors


Textual HTML Editors:
- Manual coding
- Requires HTML knowledge
- Lightweight and fast
Examples: Notepad++, VS Code, Sublime Text

WYSIWYG Editors:
- Visual design interface
- Drag-and-drop features
- Suitable for beginners
Examples: Adobe Dreamweaver, Amaya, BlueGriffon

3. Browsers for Testing Webpages


Browsers are used to display and test webpages.
Popular browsers include Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
Testing in multiple browsers ensures compatibility.

4. Advantages of HTML Editors


- Syntax highlighting
- Auto-completion
- Error detection
- Faster coding
- Easy project management
- Attractive interface

5. Software & Hardware Requirements


Software depends on Operating System:
Windows: Notepad++, VS Code, Sublime Text
Mac: TextEdit, VS Code
Linux: Vim, GEdit, VS Code

Hardware Requirements:
- CPU: 1.6 GHz or faster
- RAM: Minimum 1 GB
- Works on PCs and mobile devices

6. Browser Extensions for Developers


Useful extensions:
- Web Developer Tools
- Wappalyzer
- HTML Validator
- Web Developer Checklist

7. Basic HTML Document Structure


Basic Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here
</body>
</html>

Main Elements:
<!DOCTYPE html> – Defines HTML version
<html> – Root element
<head> – Metadata container
<title> – Page title
<meta> – Information for search engines
<body> – Visible content

8. HTML Hierarchy (DOM)


HTML elements are nested inside each other forming a tree-like structure called the
Document Object Model (DOM).

9. HTML Files
HTML files are saved with .html or .htm extension.
Example: [Link]
They store webpage structure and content.

10. Creating and Saving HTML Files


Steps:
1. Open text editor
2. Write HTML code
3. Save as .html
4. Open with browser
5. Edit using editor
6. Refresh browser to see changes

11. HTML Metadata


Metadata is information about webpage data placed inside the <head> section and not
visible on the page.
Types include: Title, Description, Keywords, Author, Character Set, Viewport, Copyright.

12. Importance of Metadata in SEO


SEO (Search Engine Optimization) improves website visibility.
Metadata helps search engines understand content, index pages, rank results, and display
summaries.
HTML tags tell search engines what the page is about and how it should be displayed.

You might also like