Search
  • Rachael Kim

Basics of Web Programming (HTML Class 1)

Review of our first class!

Check our PowerPoint:

HTML_CSS Class 1
.pdf
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.

https://codepen.io/

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

Web Programming Class 3

In class 3, we went over some more basics of HTML and CSS. Adding external links to your webpage <a href="google.com">LINK</a> Above code will produce a link to Google. *NOTE: codepen.io does not let