Enterprise Application DevelopmentTopic 13 of 37

HTML

8 minread

1,308words

Intermediatelevel

Introduction to HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It forms the basic structure of web content and is used to define elements like headings, paragraphs, links, images, forms, and other content that is displayed on the web. HTML is not a programming language but a markup language that describes the structure of a webpage.

Key Features of HTML:

Markup Language: HTML uses tags to define the content and structure of web pages. These tags are enclosed in angle brackets (< >), such as <html>, <head>, and <body>.
Simple Syntax: HTML has a simple syntax, making it easy to learn and use.
Supports Multimedia: HTML can embed images, audio, video, and other multimedia elements.
Hyperlinks: HTML provides the ability to create hyperlinks, which allow navigation between different pages or websites.
Cross-Browser Compatibility: HTML is supported by all major web browsers, ensuring that web pages can be viewed across different devices and platforms.

Basic Structure of an HTML Document

An HTML document is made up of several key sections. Here's the basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage!</p>
</body>
</html>

Explanation of HTML Tags and Structure:

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case). It tells the browser to expect an HTML5 document.
<html>: This is the root element of the HTML document. All other HTML elements are nested inside it.
<head>: Contains metadata about the HTML document, such as the title of the page, links to stylesheets, and other important information for the browser but not visible to the user.
<meta charset="UTF-8">: Specifies the character encoding for the document, which ensures that all characters are displayed correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive on different screen sizes by controlling the viewport settings.
<title>: Defines the title of the page, which appears in the browser tab.
<body>: Contains the main content of the web page that is visible to users.
<h1>: A header tag used to define the main heading on the page. There are <h1> to <h6> tags for defining headings of different levels.
<p>: A paragraph tag used to define text content.

Common HTML Tags

Headings: HTML defines six levels of headings:
- <h1>: The most important heading.
- <h2> to <h6>: Less important headings, in decreasing order of importance.
```
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
Paragraphs: The <p> tag defines a paragraph of text.
```
<p>This is a paragraph of text.</p>
```
Links: The <a> tag is used to create hyperlinks. The href attribute specifies the URL the link points to.
```
<a href="https://www.example.com">Click here to visit Example</a>
```
Images: The <img> tag is used to embed images. The src attribute specifies the image's file location, and the alt attribute provides alternative text.
```
<img src="image.jpg" alt="A description of the image">
```
Lists: There are two main types of lists in HTML:
- Ordered List: <ol> defines an ordered list (numbered list).
- Unordered List: <ul> defines an unordered list (bulleted list).
- Each item in the list is defined with the <li> tag.
```
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>
```

Forms: HTML forms are used to collect user input. The <form> tag defines the form, and it can include various input elements like text fields, checkboxes, radio buttons, and submit buttons.

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

Tables: HTML tables are created with the <table>, <tr>, <td>, and <th> tags.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
    </tr>
</table>

Div and Span:

<div> is a block-level element used to group sections of content.
<span> is an inline element used to style or group small portions of content.

<div>
    <h2>Section Title</h2>
    <p>Some content goes here.</p>
</div>

<p>This is <span style="color:red">important</span> text.</p>

HTML Attributes

Attributes provide additional information about an HTML element. They are always written inside the opening tag. Some common attributes include:

id: Assigns a unique identifier to an element.

<p id="intro">This is an introductory paragraph.</p>

class: Assigns a class name to an element, which can be used for styling with CSS.
```
<p class="highlight">This is a highlighted paragraph.</p>
```

style: Adds inline CSS styling to an element.

<p style="color: blue;">This text is blue.</p>

src: Specifies the source for media elements like images and videos.
```
<img src="logo.png" alt="Company Logo">
```

href: Specifies the URL for a link.

<a href="https://www.example.com">Go to Example</a>

HTML Forms and Input Elements

Forms allow users to enter data, such as text, numbers, dates, etc. Common input elements include:

Text input: <input type="text"> for entering text.
Password input: <input type="password"> to enter sensitive information.
Radio buttons: <input type="radio"> for selecting one option from a group.
Checkboxes: <input type="checkbox"> for selecting multiple options.
Submit button: <input type="submit"> to send the form data.

<form action="submit_form.php">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username">
   
   <label for="gender">Gender:</label>
   <input type="radio" id="male" name="gender" value="Male">
   <input type="radio" id="female" name="gender" value="Female">
   
   <input type="submit" value="Submit">
</form>

HTML5 and New Features

HTML5 introduced several new features and APIs, including:

Semantic elements: Tags like <header>, <footer>, <article>, <section>, and <nav> to better define the structure and meaning of content.
Multimedia support: Native support for embedding audio (<audio>) and video (<video>) elements.
Canvas: A <canvas> element to draw graphics dynamically using JavaScript.
Local storage: Storing data in the browser with local storage API.

Conclusion

HTML is the backbone of web development, providing the fundamental structure of web pages. By combining HTML with other technologies like CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, developers can create rich, dynamic, and interactive web applications. Understanding HTML is essential for anyone looking to develop websites or web-based applications.

Previous topic 12

Introduction to windows forms

Next topic 14

Introduction to javascript: javascript and its data types, variables, functions

Past Papers

Open this section to load past papers

Click on Show Past Papers to see past papers.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First HTML Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first webpage!</p> </body> </html>

<form action="submit_form.php"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="gender">Gender:</label> <input type="radio" id="male" name="gender" value="Male"> <input type="radio" id="female" name="gender" value="Female"> <input type="submit" value="Submit"> </form>