1 of 36

What is a website?

2 of 36

A website is a collection of files, hosted on a server.

3 of 36

4 of 36

5 of 36

6 of 36

1990, First web server. A server is a computer that is always connected to the internet.

This machine is a Server!

DO NOT POWER DOWN!!

7 of 36

These days, typically, servers are large networks of computers that you pay some money to rent storage on. �That's called hosting.

8 of 36

9 of 36

HTTP Request

https://en.wikipedia.org/

10 of 36

HTTP Request

https://en.wikipedia.org/

HTTP Response

11 of 36

Demo

12 of 36

13 of 36

HTML

HyperText

Markup

Language

14 of 36

HTML

CSS

JavaScript

Structure

Style

Behavior

15 of 36

HTML

CSS

JavaScript

structure

style

behavior

16 of 36

HTML elements

17 of 36

Element

18 of 36

Opening tag

19 of 36

Closing tag

20 of 36

Content

21 of 36

A list of all HTML tags

22 of 36

Let's write some HTML...

23 of 36

  1. Open Sublime Text, and make a new file.
  2. Copy and paste the code to the right into the file.
  3. Save the file with .html extension, i.e. "test.html".
  4. Now, open the test.html file in Chrome.

<!DOCTYPE html>

<html>

<head>

<title>Website title</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

​

24 of 36

Let's build on this... try:

​

  1. editing the content
  2. adding a heading
  3. making a list
  4. making a word bold

<h1>My first heading</h1>

​

<ol>

<li>Ice cream</li>

<li>Watching basketball</li>

<li>Folk music</li>

</ol>

​

<p>Technology is <b>truly</b> amazing</p>

25 of 36

Some things to try...

26 of 36

Use &nbsp; characters to create additional spaces between words or letters.

27 of 36

Use <br> elements to add line breaks.

28 of 36

Make some text bold with a <b> tag!

As you see in the browser:

29 of 36

Add an image with an <img> tag

In HTML, images are linked. In the quotes, add the filename of your image. NOTE: the image has to be in the same folder as your html file in order for it to appear.

<img src="penny.png">

30 of 36

Add a link! Hyperlinks are made with <a> tags, which stand for anchor. An <a> tag has a href attribute, which stands for HyperText reference. This specifies the destination for the link.

​

where the link goes

Inside the <a> tags is the linked content. This appears on the page.

31 of 36

Remember... elements are often nested.

Here, a <b> tag (bold) is inside a <p> tag (paragraph).

The <b> tag makes the text bold.

As you see in the browser:

32 of 36

The header tags (<h1>, <h2>,…,<h6>) are used for headings.

The number is based on hierarchy of importance, and by default headings help to create typographic hierarchy.

​

33 of 36

Use a <p> tag to enclose a paragraph of text.

34 of 36

Styling tags let you do basic text styling with HTML. This page shows a few examples. Here's the full list.

35 of 36

<ol> and <ul> stand for ordered list and unordered list.

Use these tags in combination with <li>, or list items, to make bulleted or numbered lists.

​

​

36 of 36

<ol> and <ul> stand for ordered list and unordered list.

Use these tags in combination with <li>, or list items, to make bulleted or numbered lists.

​

​