Web Development

1 HTML

HTML (HyperText Markup Language): A declarative language that include directives with content.

Approach

Start with content to be displayed.
Annotate it with tags.

Commonly-used Tags

<head>: Contains miscellaneous things such as page title, CSS stylesheets, etc
<body>: The main body of the document
<p>: New paragraph
<br>: Force a line break within the same paragraph
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings
<b>, <i>: Boldface and italic
<pre>: Typically used for code: indented with a fixed-width font, spaces are significant (e.g., newlines are preserved)
<img>: Images
<a href="...">: Hyperlink to another Web page
: Comment tags
<table>, <tr>, <td>: Tables
<ul>, <li>: Unordered list (with bullets)
<ol>, <li>: uOrdered list (numbered)
<div>: Used for grouping related elements, where the group occupies entire lines (forces a line break before and after)
<span>: Used for grouping related elements, where the group is within a single line (no forced line breaks)
<form>, <input>, <textarea>, <select>: Used to create forms where users can input data
<title>: Specify a title for the page, which will appear in the title bar for the browser window.
<link>: Include CSS stylesheets and more
<script>: Used to add Javascript to a page (can be used in body as well)

Example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Document</title> </head> <body> <h1>Heading 1</h1> <p>Paragraph 1</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> </ol> <a href="https://www.google.com">Google</a> <img src="image.jpg" alt="Image"> </body> </html>

XHTML: XHTML is more strict about adhering to proper syntax.

Example

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Hello World</title> </head> <body> <p>Hello world!</p> </body> </html>

2 CSS

CSS: Style sheets to specify style to use rather than browser default.

body { // Selector background-color: lightblue; // Property: Value color: white; font-family: Arial, sans-serif; } // Declaration Block

CSS Selector	CSS	html
Tag Name	h1 { color: red; }	<h1>Today's Specials</h1>
Class Attribute	.large { font-size: 16pt; }	<p class="large"></p>
Tag and Class	p.large { font-size: 16pt; }	<p class="large"></p>
Element ID	#p20 { font-weight: bold; }	<div id="p20"></div>

CSS Pseudo Selectors

hover: Apply rule when mouse is over element (e.g. tooltip)
p:hover, a:hover { background-color: yellow; }
a:link, a:visited: Apply rule when element is being activated (e.g. button press)
a:link { color: blue; } a:visited { color: green; }

2-1 Color Properties

Predefined names: red, blue, green, white, etc. (140 standard names)
8-bit hexadecimal numbers for red, green, blue: #ff0000 (RGB)
0-255 decimal intensities: rgb(255,255,0)
Percentage intensities: rgb(80%,80%,100%)

2.2 Size Properties

Box Model

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Last modified: 25 November 2024