Web design 1

INTRODUCTION TO HTML AND CSS

1. THE CLIENT SERVER MODEL
2. www: a system of interlinked documents(websites) accessed via the internet
3. The Model
4. CLIENT: The user’s web browser (e.g. Google Chrome, Safari) on their device (laptop, phone)
5. REQUEST: The client “requests” a website (e.g. by typing a URL)
6. SERVER: A powerful, permanently-connected computer (a “web server”) that “hosts” (stores) the website’s files (HTML, CSS, images).
7. RESPONSE: The server finds the requested files and “serves” (sends) them back to the client’s browser, which then assembles and displays the web page.
8. HTML-THE SKELETON OF THE WEB

HTML-Hypertext Mark-up Language

HYPERTEXT: Texts that contains links (hypertext) to other texts

MARKUP LANGUAGE: A language that uses “tags” to describe or structure the content. It is not a programming language; it has no logic

THE CONCEPT OF “TAGS”

-Tags are keywords in angle brackets: <tagname>

-They almost always come in pairs: an opening tag <p> and a closing tag</p?

<p> This is a paragraph. </p> (The tags “markup” the content).

 

THE BASIC HTMLDOCUMENT STRUCTURE (THE “BOILERPLATE”):

 

<!DOCTYPE html>

<html>

<head>

<title> This is the Page Title (shows in browser tab) <title>

</head>

<body>

<!—All visible content goes here-->

<h1> This is a main heading.</h1>

<p> This is a paragraph.</p>

<body>

</html>

 

ESSENTAL HTML TAGS:

<h1> to <h6>: Heading tags (H1 is the most important, H6 is the least)

<p>: Paragraph

<a href=”URL”>: Anchor (link)tag. Href is an “attribute”

Example: < a href=https://ww.google.com>Click to visit Google</a>

<img src=”PATH” alt=”DESCRIPTION”>: Image tag (self-closing).

Src: The “source” (path or URL) of the image.

Alt: “Alternate text” (critical for accessibility/screen readers and if the image breaks).

<u1> (Unordered List) & <ol> (Ordered List): Used with <1i> (List item) tags

1. CSS-THE SKIN OF THE WEB

Cascading style sheets: It controls the entire presentation style and layout of the HTML content.

SEPERATION OF CONCERNS (THE “WHY”):

HTML is for content/structure.

CSS is for style.

They should be kept in separate files. This makes websites easier to maintain.

THREE WAYS TO ADD CSS (FROM BEST TO WORST):

1. EXTERNAL (BEST PRACTICE): A separate .css file (e.g. style.css). it is linked in the HTML <head>:

<link re1=”stylesheet”href=”style.css”>

1. INTERNAL (OKAY FOR TESTING): CSS code is placed inside a <style> tag in the HTML<head>
2. INLINE (BAD PRACTICE): CSS is placed directly inside an HTML tag using the style attribute:

<p style=”color”.red; font-size: 20px;”>

BASIC CSS SYNTAX (SELECTOR, PROPERTY, VALUE):

/* This is a CSS comment*/

 

Selector {

Property: value;

}

 

H1{

Color: blue;

Font-size: 32px;

}

P{

Color: #333333;/* A dark grey hex code*/

Font-family: Arial, sans-serif;

}