{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# HTML and CSS\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Markup Languages\n", "Essentially, a markup language is a type of language that employs annotations or tags to dictate how a computer should process the text within those tags. The tags provide the computer with instructions on how to display or interpret the enclosed text. Many markup languages are designed to be easily readable by humans and are intended to be composed using simple text editors, not complex word processors such as MS Word. The present book employs a markup language known as Markdown. Markdown prioritizes human readability and simplicity.\n", "\n", "\n", "## HTML (Hyper-Text Markup Language)\n", "HTML, similar to other markup languages, aims to structure a document and provide content. Styling and aesthetics come later, with the introduction of CSS.\n", "\n", "In HTML, tags are used to markup the document. They follow the format for opening and for closing, with the forward slash differentiating the closing tag from the opening tag.\n", "\n", "An HTML document is essentially a sequence of these paired tags. Let's take a look at a rudimentary HTML document:\n", "\n", "```\n", "\n", " \n", " Sample Page\n", " \n", " \n", "

My First Heading

\n", "

A straightforward paragraph of text.

\n", "

Another paragraph of text.

\n", " \n", "\n", "```\n", "\n", "In this example, if you were to adjust the text within one of the paragraphs, or perhaps change the h1 tag to h2 (remember to adjust both opening and closing tags), you'll see the changes reflected when viewing in a browser.\n", "\n", "Indentation is used for clarity and does not affect how the browser interprets the HTML document. You could remove all indentation or place all code on one line, and the rendered page would remain unchanged.\n", "\n", "As we delve into specific HTML tags, it's beneficial to contemplate the overall structure of the webpage being built. One way to visualize this is through a \"tree view\" of the HTML page. In such a view, the html tag is the root of the tree, branching out to head and body tags as its children, which further subdivide into other tags. The tree view illustrates the hierarchical nature of an HTML document, a structure we'll frequently revisit as we begin working with CSS and JavaScript.\n", "\n", "\n", "## HTML Document Structure\n", "Imagine an HTML document as a neatly organized office file. It has a clear structure, with different sections serving different purposes. Here's how it looks:\n", "```\n", " html\n", " Copy code\n", " \n", " \n", " \n", " Page Title\n", " \n", " \n", "

My First Heading

\n", "

My first paragraph.

\n", " \n", " \n", "```\n", "The declaration is like the label on the file - it tells the browser that this is an HTML5 document. The tag is the file itself, containing all the other elements. The is like the file's index, containing meta-information about the document, while the is the main content of the file.\n", "\n", "## Basic HTML Tags\n", "Now, let's explore the basic elements or 'tags' that make up the content of a web page.\n", "\n", "* Headings: Headings in HTML are like the chapter titles in a book, guiding the reader through the content. They range from `

` for main headings, down to `

` for the smallest subheadings.\n", "* Paragraphs: The `
` tag is used to define a paragraph. It's like the sentences in a book, providing the main content.\n", "* Images: Images bring a web page to life! The `` tag is used to embed an image in a web page. Remember to always include the alt attribute to provide a description of the image for screen readers.\n", "* Links: Links are the essence of the web, connecting one page to another. The `` tag defines a hyperlink.\n", "* Text Formatting: HTML provides several tags for formatting text, including `` for bold text, `` for italic text, and `` for underlined text.\n", "\n", "## Advanced HTML Tags\n", "As we delve deeper into HTML, we encounter more complex tags that allow us to create a variety of content structures.\n", "\n", "* Unordered lists, created with the `
` tag, are like the bullet points in a presentation, allowing us to present information in a clear, concise format.\n", "\n", "* Ordered lists, created with the `
` tag, are like the numbered steps in a recipe, providing a clear sequence of information.\n", "\n", "* Description lists, created with the `
`, `
` (description term), and
(description data) tags, are like a glossary, providing a list of terms along with their descriptions.\n", "\n", "* Nested Lists: Nested lists are lists within lists, allowing us to create complex hierarchical structures.\n", "\n", "## HTML Attributes\n", "HTML attributes are like adjectives - they provide additional information about an element. They come in pairs and are included in the opening tag of an element. For example, the src attribute in an `` tag provides the source URL of the image.\n", "\n", "## HTML5 Semantic Elements\n", "Semantic elements are like the signposts in a city, providing meaningful information about the content they contain. They help both the browser and the developer understand the structure of the content. Examples include `
`, `
`, `
`, `
`, `
`, `
`, and `
`.\n", "\n", "## HTML Validation\n", "HTML validation is like a spell check for your code. It ensures that your HTML is written according to the standards set by the World Wide Web Consortium (W3C). This helps avoid potential issues with how different browsers interpret your code. Tools like the W3C HTML validator can be used for this purpose.\n", "\n", "## Best Practices\n", "Just like any language, HTML has its own set of best practices. Proper indentation and formatting make your code easier to read and understand. Comments can be used to explain your code, making it easier for others (and future you) to understand. It's also important to ensure that your web content is accessible to all users, including those with disabilities.\n", "\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Cascading Style Sheets (CSS) Basics\n", "\n", "If HTML is the skeleton of a web page, CSS is the skin and clothing that makes it visually appealing. CSS is a stylesheet language used to describe the look and formatting of a document written in HTML.\n", "\n", "CSS was first proposed by Håkon Wium Lie on October 10, 1994. Since then, it has evolved into a powerful tool that allows developers to create beautiful, responsive, and user-friendly websites. It's one of the three cornerstone technologies of the World Wide Web, alongside HTML and JavaScript.\n", "\n", "\n", "## CSS Syntax\n", "\n", "CSS is made up of \"rules\", each consisting of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.\n", "\n", "Here's an example of CSS syntax:\n", "\n", "```css\n", "p {\n", " color: red;\n", " text-align: center;\n", "}\n", "```\n", "\n", "In this example, `p` is the selector, and `color: red;` and `text-align: center;` are declarations. `color` and `text-align` are properties, and `red` and `center` are the values.\n", "\n", "You can also add comments in CSS by wrapping the comment text with `/` and `/`.\n", "\n", "## How to Include CSS\n", "\n", "There are three ways to include CSS in your HTML documents:\n", "\n", "1. Inline CSS: CSS is applied directly to the HTML elements using the `style` attribute. This method is not recommended as it mixes HTML with CSS, making the code harder to maintain.\n", "\n", "2. Internal CSS: CSS rules are included in the `` section of the HTML document using the `