As part of the Graphic Design For Print and Web program at Humber College, we have a web development class. Learning coding in html and css are the building blocks of creating any website. The only experience I’ve ever had creating a website was for my own professional photography portfolio (www.marekszkudlarek.com) and I used Adobe Muse. Learning code at first felt like I was learning a whole new language. I guess it is in a sense, it’s completely overwhelming and a ton of information to take in at first. But once I started to understand it, it all came together. It helps to do some research online and here are a couple great links if you ever want to learn for yourself. w3schools and Codecademy
Click here to see my first attempt of creating an actual website using only code!
Here I am going to break down the building blocks for html and css for future reference.
Introduction
Web pages are created using HTML and CSS. What do these languages do?
HTML is used to establish a page’s structure. It also lets us add text, links and images.
CSS is used to control the design and layout of the page.
HTML elements
HTML elements are the building blocks of web pages.
The web page below is made up of a collection of HTML elements. Each element is outlined in blue and labeled with its name.
HTML elements describe each piece of content on a web page so that the web browser knows how to display it.
The next few cards will cover five common HTML elements.
Heading elements
Headings are described by heading elements. There are six levels of heading elements: h1 to h6.
The h1 element is used to describe the main heading of the page.
<p>
Similar to a news article or a word document, headings in a web page are usually followed by paragraphs.
In HTML, paragraphs are described by paragraph elements, or p elements.
<a>
The defining feature of the Web is the presence of links. Clicking on links leads to other web pages. The a element is used to create links.
The a element is similar to the h1 or p elements, but it has two key differences:
First, it has an href attribute which equals the website you want to link to.
Second, you get to choose the link text that users see on the page.
<img>
In addition to headings and paragraphs, a web page can have images. The img element is used to add images to a page.
The img element has an attribute inside the opening <img> tag named src. The src attribute has the address of the image.
<ul> and <li>
In addition to paragraphs and images, content can be presented as lists.
In HTML, a list made with bullets is described using a ul element. Each item in the list is placed inside an li element.
<html> and <body>
Here’s an example of a real web page:
Everything inside a web page is nested inside the html element
The body element contains the actual content of the web page – everything nested inside <body> and </body> shows up in the web browser
The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn’t have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.
Introduction CSS
Web pages are created using HTML and CSS.
A web page is a collection of HTML elements. CSS is used to control the appearance of an HTML element.
The code below specifies that h1 elements be colored red. This code is called a CSS rule.
CSS Rules
CSS uses rules to style HTML elements. Here’s how CSS rules work:
A CSS rule starts with a selector. A selector specifies which HTML elements to style. Here the h1 CSS selector selects all h1 HTML elements on the page.
Inside the braces { }, a property and its value define what aspect of the h1 elements to style. Setting the color property to red changes the color of the h1 element to red.
Together, a selector and its property-value pairs are called a CSS rule.
Class Attribute
HTML elements can be CSS selectors, but they’re not the only selectors available. Another available selector is the class selector.
Class Selector
The class can be targeted from CSS by using a dot (.),
The .header selector applies a blue text color only to the elements nested inside
In this way, classes are useful to specifically target groups of HTML elements.
Combining Selectors
It’s possible to be even more specific by combining classes and element names.
This CSS selector selects any p element nested inside an HTML element with the class named header, and colors it blue.
In this way, a CSS rule targets specific HTML elements on the page and applies a style to them.
color
The color property sets the color of an HTML element’s text.
We can use color names to change the text’s color. But this only works for 140 colors.
Instead, we can use RGB values or hexadecimal numbers. They can represent millions of colors. RGB values and hex numbers express colors as different amounts of red, green and blue.
RGB values range from 0 to 255, with 255 being the brightest.
Hex numbers vary from 00 to ff, with ff being the brightest.
font-family
The font-family property sets the font of an HTML element’s text.
Three fonts commonly used with font-family are:
font-family: Arial, Helvetica, sans-serif;
font-family: “Times New Roman”, Times, serif;
font-family: “Courier New”, Courier, monospace;
Google Fonts is a free collection of over 600 more web fonts that you can use on your page.
font-size
The font-size property sets the size of an HTML element’s text.
Text size can be measured in pixels, ems, or rems. We will use pixels here.
Review
CSS uses rules to define the design of an HTML element.
Here’s an HTML element labeled with the CSS properties that control different aspects of its appearance. When you want to style an HTML element, imagine there is a box around it and apply these properties to style it.
We’ve already looked at three properties to control the appearance of an HTML element’s text. The next few cards will cover five more properties that affect the space surrounding the text.
background-color
The background-color property sets the color for the background of an HTML element.
background-image
Instead of a solid color, the background-image property sets an image as the background of an HTML element.
border
The border property sets the width, style, and color of an element’s border
padding
The padding property creates space between the content and border of an element. This white space is useful in order to improve readability and organization of the page.
padding
The padding property sets the padding on all sides. It’s possible to set the padding on each side.
The properties padding-top, padding-bottom, padding-left, and padding-right are available to set the padding on each side of an HTML element.
margin
The margin property creates space for multiple HTML elements. The margin is a transparent area outside the border of an element.
margin
The margin property sets the margin on all sides. It’s possible to set the margin on each side.
The properties margin-top, margin-bottom, margin-left, and margin-right are available to set the margin on each side of an HTML element.
margin
The properties margin-left, and margin-right are available to set the margin on either side of an HTML element. If one of these properties is set to auto, then it will take as much as possible.
To move the HTML element to the far left of the screen, use margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.
To center an element, set margin-right: auto and margin-left: auto. The margin to the left and right will be equal and the element will be centered.
<head> and <link>
Here’s an example of using CSS in a web page:
The head element contains information that the web browser needs to display the page.
The link element tells the browser where to find the CSS file used to style the page. The rel attribute tells the browser that the file being linked is a CSS file to style the page. The href attribute gives the browser the path to the CSS file.
The body element contains the content of the page that shows up in the web browser.
I hope you enjoyed the break down thus far. I’ll keep adding information as I learn more coding for web design.
Marek Szkudlarek 