From ae2e8d350f4f0fb89fdae2c6733a0662262d01e7 Mon Sep 17 00:00:00 2001 From: Suetena Date: Fri, 7 Feb 2025 10:45:25 +1300 Subject: [PATCH] update --- SUMMARY.md | 3 + Webdev/Webdevmanual.md | 535 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 538 insertions(+) create mode 100644 Webdev/Webdevmanual.md diff --git a/SUMMARY.md b/SUMMARY.md index dc740ed..adfa972 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -40,6 +40,9 @@ * [Docker Networking](DockerWU/dockernetworking.md) * [Setup Docker Webservice](DockerWU/SettingUpDockerforWebServices.md) * [Setup Docker OPenvpn, Tor, Cache](DockerWU/SetupDockerOVPNTORCACHE.md) +* [Web Development] + * [Web Dev Manual](Webdev/Webdevmanual.md) * [Future Projects](future-projects/README.md) * [NIST Agregator](future-projects/nist-agregator.md) * [DataViz For the Pacific](future-projects/dataviz-for-the-pacific.md) + diff --git a/Webdev/Webdevmanual.md b/Webdev/Webdevmanual.md new file mode 100644 index 0000000..ca03dfb --- /dev/null +++ b/Webdev/Webdevmanual.md @@ -0,0 +1,535 @@ +### :orange[HTML Learning Manual] + +Welcome to the exciting world of Web Development! This manual is designed to guide you through the fundamentals of HTML (HyperText Markup Language), the backbone of every webpage you see on the internet. Let's embark on this journey to understand how to structure content for the web. + +:blue[Step 1: Introduction to HTML] + +HTML is not a programming language; it's a **markup language**. This means HTML uses tags to structure content on a webpage. Think of it as the skeleton of a website, providing the basic framework upon which CSS (styling) and JavaScript (interactivity) are built. + +* **Purpose of HTML:** HTML is used to create the structure and content of web pages. It defines elements like headings, paragraphs, lists, links, images, and more. +* **HTML Documents:** HTML documents are plain text files with an `.html` or `.htm` extension. These files are interpreted by web browsers to display web pages. +* **Basic HTML Structure:** Every HTML document follows a basic structure. Let's look at the fundamental components: + +```html + + + + + + Page Title + + +

Hello, World!

+

This is a paragraph of text.

+ + +``` + +* **``:** This declaration defines the document type and version of HTML being used. `` is for HTML5, the latest standard. +* **``:** The root element of an HTML page. It tells the browser that this is an HTML document. The `lang="en"` attribute specifies the language of the document as English. +* **``:** Contains meta-information about the HTML document, such as the title, character set, and links to stylesheets and scripts. This information is not displayed on the webpage itself but is crucial for browser settings and SEO. + * **``:** Specifies the character encoding for the document, UTF-8 is widely used and supports most characters. + * **``:** Configures the viewport for responsive web design, ensuring the page scales correctly on different devices. + * **`Page Title`:** Sets the title that appears in the browser's title bar or tab. +* **``:** Contains the visible content of the HTML document, such as text, images, links, and other media. This is what users see on the webpage. + * **`

Hello, World!

`:** A level 1 heading, used for main titles. HTML provides headings from `

` to `

` (decreasing in importance). + * **`

This is a paragraph of text.

`:** Represents a paragraph of text. + +:blue[Step 2: HTML Elements and Tags] + +HTML documents are composed of **HTML elements**. An HTML element is defined by a **start tag**, some **content**, and an **end tag**. + +* **Tags:** Tags are keywords enclosed in angle brackets (`< >`). + * **Start Tag:** Marks the beginning of an element (e.g., `

`). + * **End Tag:** Marks the end of an element and is the same as the start tag but with a forward slash before the element name (e.g., `

`). +* **Elements:** An HTML element encompasses everything from the start tag to the end tag, including the content in between. For example, `

Hello, World!

` is an `h1` element. +* **Empty Elements (Self-Closing Tags):** Some elements do not have content and are called empty elements. These elements usually have a self-closing tag in XHTML, but in HTML5, they are simply written with a start tag. Examples include `
` (line break) and `` (image). While `
` or `` is valid in XHTML and older HTML, in HTML5, `
` and `` are preferred. + +**Common HTML Tags:** + +* **Headings:** `

` to `

` for different levels of headings. +* **Paragraphs:** `

` for paragraphs of text. +* **Links:** `` (anchor) for creating hyperlinks to other web pages or resources. + ```html + Visit Example + ``` +* **Images:** `` for embedding images. + ```html + Description of the image + ``` + * `src` attribute specifies the path to the image. + * `alt` attribute provides alternative text for the image, important for accessibility and SEO. +* **Lists:** + * **Unordered Lists:** `