Web Programming Basics
Web programming forms the backbone of the internet as we know it. It's the process of creating applications that run on the web, making information accessible and interactive globally. This unit will introduce you to the fundamental technologies that power web applications, starting with the structure of web pages and moving towards more dynamic and server-side programming.
HTML (HyperText Markup Language)
HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of a web page using a system of tags. These tags tell the browser how to display text, images, and other media. HTML is not a programming language; it's a markup language because it uses tags to annotate text, images, and other content in a way that a web browser can understand and use to render a webpage.
Basic Structure of an HTML Document
Every HTML document follows a basic structure. This structure ensures that browsers can correctly interpret and render the page.
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used. For modern web pages, it's ``.<html>: This is the root element of an HTML page. All other elements are contained within this tag.<head>: This section contains meta-information about the HTML document, such as its title, character set, links to stylesheets, and scripts. This information is not displayed directly on the page.<title>: Inside the<head>, this tag defines the title of the document, which appears in the browser's title bar or tab.<body>: This section contains the visible content of the HTML document – the text, images, links, tables, and everything else the user sees.
Common HTML Tags and Elements
HTML uses tags, enclosed in angle brackets (`< >`), to mark up content. Most tags come in pairs: an opening tag and a closing tag. The content is placed between these tags. For example, `` opens a strong tag, and `` closes it. Some tags, like the image tag (``), are self-closing.
Text Formatting Tags
<h1>to<h6>: Heading tags, with `` being the most important and `
` the least.
<p>: Defines a paragraph.<br>: Inserts a single line break.<hr>: Defines a horizontal rule (a thematic break).<strong>: Defines important text (usually bold).<em>: Defines emphasized text (usually italic).<u>: Defines underlined text.<strike>or<del>: Defines text that should be considered deleted (struck through).<sub>: Defines subscript text (e.g., H2O).<sup>: Defines superscript text (e.g., x2).
Lists
<ul>: Unordered list (bullet points).<ol>: Ordered list (numbered or lettered).<li>: List item, used within `- ` or `
- `.
Links
<a href="https://www.example.com">Visit Example.com</a>
Images
The `` tag is used to embed images. The `src` attribute specifies the image file path, and the `alt` attribute provides alternative text for screen readers or if the image fails to load.
<img src="image.jpg" alt="A descriptive text for the image">
Tables
Tables are created using `
| ` (table header), and ` | ` (table data) tags.
HTML AttributesAttributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like `name="value"`.
|
|---|