Before coding, we need to decide which sections of the website should
incorporate images and which can be coded. Let’s use Photoshop’s
Slice tool (hidden under the
Crop tool submenu) and section off areas like the burrito photo, and
Joan’s tacos.
Now, we need to Export our slices — Go to File > Save for Web
(Alt+Shift+Ctrl+S). When a particular slice is selected, you can set its
Export options on the right side of the window (JPG, PNG, etc.). If you
double-click on a specific slice, you will see the
Slice Options window pop up — this allows you to name specific slice files.
By default, all images are placed in: subdirectory/images/. If you want to export only the slices you’ve created, then select
All User Slices in the Save window.
The images we exported will be embedded into our HTML document using the
![]()
<img> tag.
Creating a basic HTML document
We have our slices, let’s create a basic HTML document.
Line 1: Declares that the HTML 5 dialect is the document language.
Line 2: <html> element represents the root of
an HTML document. This is an obligatory container that marks the borders
of our document.
Line 3: <head> section contains invisible page elements like the meta information, title, etc.
Line 4: <meta charset=”utf-8″> This is the declaration of document encoding —
utf-8 is a secure choice — you can learn more about HTML character encodings
here.
Line 5:
<title>Sample page</title> This is the page title which is visible in the browser title bar.
Line 6:
</head> closes the <head> tag from Line 3.
Line 7:
<body></body> This body element will contain all the visible content of the page.
Line 8: </html> closes the <html> tag from Line 2. This element marks the end of the document.
There are other possible ways to code the same design. We will use
HTML 5 semantic tags (header, nav, article, footer) to create a basic
document structure:
This is the layout translated to HTML:
A few things to note :
Line 9: <img src=”"/>
![]()
This is an src attribute which contains a path to the image file.
Line 11 and 12: <a> elements are the essence of the Internet as they are used to create
hyperlinks. They’re paired with the HREF attribute, and should link a target
URL.
Lines 18 to 20:
These are a few
text formatting tags: <h1> stands for a first level header;
<p> stands for a paragraph; <br> stands for a line break.
Format with Cascading Style Sheets (CSS)
When you open just the HTML file in a web browser, you’ll see it’s
not formatted like our design from earlier. This is because the HTML
code is not enough — we need to format it with
Cascading Style Sheets (CSS). CSS is a stylesheet language that’s used to format HTML elements.
But why, exactly, do we need to pair HTML with CCS? Some time ago,
formatting was achieved by adding attributes to HTML tags. However, this
led to an unreadable and unmaintainable code. The solution was
to separate document content (HTML) from document formatting (CSS).
Let’s breakdown a simple
CSS rule:
.
Selector: This is the HTML element you want to style. For example: <article>
Declaration: A CSS rule can have 1 or more
declarations. Each declaration consists of a property and value, and
is separated by a semicolon. You place declarations between curly
brackets { }.
Property: This is the style characteristic you want to change. For example: background color, font size, etc.
Value: Each property has a value associated with it. For example: #ffcc11 (for background color), 16px (for font size), etc.
There are
a ton of CSS properties
that can be set for each HTML element, but it’s not necessary to write
them all yourself. You can rely on your browser’s default settings, or
use a base stylesheet that resets your browser to reasonable values. It
actually requires quite a bit of knowledge and experience to
write selectors on your own.
Let’s take a look at some of the CSS rules necessary to format our simple design.
CSS Positioning Properties: There are
4 different methods
(static, fixed, relative and absolute) that allow us to position
specific elements in our design. After you set one of these methods, you
can position elements using the top, right, bottom and left properties —
these will work differently depending on which of the 4 methods you
use. In this case, we’d like to position the
plate_image using an
absolute positioning.
CSS Box Model:
This model
is a box that wraps around all HTML elements — it includes margins,
borders, padding and the content. Margins are an invisible area around
the border, and padding is between the border and content.
