• Rachael Kim

Basics of Web Programming (HTML Class 1)

Review of our first class!

Check our PowerPoint:

HTML_CSS Class 1
Download PDF • 365KB

  1. What is HTML/CSS?

HTML stands for HyperText Markup Language. It is a programming language you use to design webpages. It defines structures and elements of your webpage.

CSS stands for Cascading Style Sheets. You use CSS to style your websites (e.g. changing background colours, font size, colour of your text, etc.). You are adding style elements to your website to make your website something more than just a plain text.

2. Codepen IO

We are going to be using a text editor called Codepen IO for this class.

Go into the link above and sign up for Codepen.

Codepen has three editors—one for HTML, CSS, and JavaScript (a language you use to make the website interactive). As you edit your code, you will be able to see how your website looks!

3. Basic Structure of HTML

HTML is consisted of elements. Tags mark the start and the end of an element. <html>, <head>, <element> are all examples of HTML tags. body, head, element are are examples of element of the website.

It is the convention to indent the lines to show the hierarchy of your elements. head element is a child of html element. element is a child of body element.

There are some special tags in HTML that are pre-defined.

<head> tag contains data about the information. You can provide links to stylesheet, javascript file, etc. in head element. You can change the title of your website. The elements you have in between head tag usually don't appear on the website.

<body> tag contains the actual content of the webpage. It contains things like images, texts that actually appear on the webapge.

<h1> tag: header tag

bold, large texts that are used for titles/subtitles.

you have <h2>, <h3>, ... tags and as number gets bigger, the font gets smaller.

<p> tag: paragraph tag

4. Adding images

You use <img> tags to insert images onto your screen.

<img src="">

src defines the source of the image. You put in the image address in src parameter.

Make sure you put quotation parts around the link.

You can put in the link of the image either on your computer or on the Internet.

If you want to copy an address of the image from the internet, just right click on the photo and click on 'copy image address.'

5. Basic CSS

To change a style of HTML element, you need to specify what element you are choosing and what style you are changing.

In line 1, you specify that you are going to modify p tag. In line 2, you specify that you are changing the colour of the text to #1e2cf2.

In line 6, you are changing the width of the image. px stands for pixel, which is a unit of measurement used in designs and web designs.

Recent Posts

See All

First Class (Python Section)!

It's great to be back and see all of our students (new and returning) for our fall course! In our Python section, we covered some basic but key concepts in Python, including variables, loops, conditio

Phillips Exeter Academy Girls Who Code

Phillips Exeter Academy

20 Main Street

Exeter, NH 03833

Quick Links

© 2020 by Exeter Girls Who Code

This site was designed with the
website builder. Create your website today.
Start Now