In this assignment, you will create a webpage using HTML and add styles with CSS to create text hierarchy. This is a meant as a very basic introduction to front-end coding for web design.
Before You Begin
For content on your webpage, you’ll be writing about an obscure personal talent or accomplishment. What’s something you’re good at that most people don’t know or wouldn’t expect? You can write this as you go, but it may be helpful to get your text and photo collected ahead of time. You will need:
- Headline/Title (1-3 words)
- Subhead: One-sentence description or definition
- Paragraph: One short paragraph fully explaining the obscure talent or accomplishment, approximately 100-200 words
- One related JPG image, found online and legal to use
- Link to the source for your selected image
For example, suppose you were once the best saxophonist in your high school band. You might download this Pixabay photo and keep the link in your notes.
Additionally, you’ll be using code-editing software for this assignment. There are many programs that are free to download (see Step 2 below), but please make sure you are able to download and install new software on the computer you plan to use.
Part 1: HTML Page Structure
Everything you view online is constructed with code. Multiple code languages and libraries work together so you can view content and interact with it. Something as seemingly simple as logging in to check your email involves a lot of complex code. Most actions online (searching a database, entering information in a form, adding items to a shopping cart, making a purchase) involve back-end code to process and manipulate that information. The way it all appears to you is the result of front-end code, which is mostly about visual design and page structure. Someone who can write front-end and back-end code is called a “full stack” web developer.
Recommended Reading:
• I Don’t Speak Your Language: Frontend vs. Backend
• 3 Web Dev Careers Decoded: Front-End vs Back-End vs Full Stack
• What is HTML and CSS?
In this course, we are only going to work with front-end code. There are three main types of code that front-end developers use: HTML, CSS, and Javascript.
HTML (hyper text markup language) is the language that defines the content structure for a page. This is what makes it possible to display things on a webpage. It is the core language of the web.
CSS (cascading style sheets) is a language for defining how web pages look. It is the main way to style text, images and other visual elements, such as choosing colors and fonts. It is also used to organize elements and give a page visual structure.
Javascript is a versatile scripting language that can manipulate HTML and CSS. It is used in both front-end and back-end coding, and is often used when you see elements that change or react on a webpage. For example, clicking through a photo slideshow is possible because of Javascript.
OK, now we’re ready to get started!
The webpage you’ll be making for this week’s assignment is much simpler than most websites you see, but it involves all the same elements. The assignment instructions also include an introduction to HTML and CSS, so make sure go through that carefully.
This tutorial video recorded during the pandemic shows how the process starts, since getting started is usually the most challenging part.
Setting up the File
1. Create a folder on your desktop for this project. In web design, a folder is called a directory. Give your folder a name that includes your last name and no spaces — hyphens and underscores are fine. For example: Lastname-A8-Com320 or Com320_Lastname_Assignment
Files on the web are organized exactly like files on your computer. The web address for the course website you’re viewing right now is murrowcourses.com/viscom because there is a directory (folder) named “viscom” that holds all the material for this website.
2. HTML can be written in any text editor. It doesn’t require specialized software, which is pretty great. But using software that’s meant for editing code is very helpful (and free!), so download and install a code-editing program. There are many options, but students have had good luck with Notepad++ for Windows and TextMate or BBEdit for Macs. Adobe Dreamweaver is the Adobe program for code, so that is also an option, but it is not recommended since it will insert unnecessary code for you (if you use it, make sure to only work in the code view, not the visual editor).
Open a new file and save it as an .html file in your assignment folder with the name index.html. This is a standard web convention for clean URLs. (Some text editors add the .html automatically when you choose a file type, and some require you to actually type it in.)
3. Now it’s time to see how your file displays in a web browser. You’ll do this many times to test your design as you work.
- In your HTML file, type:
Hello world.Save the file. - Open the file in a web browser. You can view it in a web browser and continue to edit it in your editing software without closing either window.
- The text that you typed should appear in the top left.
In your code-editing software, type “Hello World.” into the first line of your new HTML file.
To preview your HTML file, you can open it in a web browser while the file is still open in your code editor.
Although you can view the page as if it’s online, you can see in the URL bar that it’s really just saved on your computer.
Note that viewing your file in a web browser doesn’t mean your file is online. The path that displays in the URL bar just goes back to your desktop. You would need to upload your HTML file to a web-connected server for other people to view it online.
Adding Page Structure
HTML uses tags to define content. Most tags have an opening tag and a closing tag to tell the browser where the element begins and ends.
W3Schools is a fantastic reference website for HTML and CSS. If you have any trouble with the following steps, start from the beginning with the W3Schools HTML tutorials.
4. Start by adding the main tags to define the document. At the very top, type <!DOCTYPE html> and then type <html> and </html> around your “Hello World” text.
5. Every HTML document is split into two main sections: the head and the body. The body is where you put content that will display on the page. The head is where you put content that is invisible to users but important for telling the browser about your page, such as linking resources and adding meta tags for social media.
After your <html> tag, add opening and closing tags for <head> and <body>. Keep your “Hello World” text within the body tags since this is content that should display on the webpage.
6. There is some information that should be in the head of every HTML webpage. Add these two lines within the head tags, and then personalize the title text to include your name.
<meta charset="utf-8">
<title>Your Page Title Here</title>
Check your page in the web browser. All of this structure is invisible, so it should still look essentially the same as it did before. However, you should now be able to see your page title in the browser tab.
Adding Content
7. In place of the “Hello World” text, we’re now going to add some actual content as described at the very beginning of this assignment. Choose your obscure accomplishment and and write your one-sentence subhead.
In the body section, add the headline/title on one line and the descriptive sentence on the next line. Enclose each line in a set of paragraph tags: <p>Text</p>
Add your paragraph fully explaining your topic and enclose it in <p> tags. View this in your web browser to make sure all the text is showing up.
8. Text hierarchy is built into HTML using heading tags: <h1> through <h6>
Change the <p> tags around your first line of text (title) to <h1> tags. Change the <p> tags around your second line of text (description) to <h2> tags.
Refresh the page in your browser to see how this changes things. If you’re not seeing changes, make sure you’ve saved your file!
9. Images are inserted with the <img> tag. This is a self-closing tag, meaning you don’t ever need a </img> tag. All the information is included within the tag.
As long as your image is saved in the same folder with your HTML file, you can use a relative path to reference the image:
<img src="image-file-name.jpg" />
Add your selected image to the bottom of your page below the dummy text. When you preview your page in the browser, you will see the image at whatever size the image is saved.
If your photo is not appearing, these are some common issues:
- Make sure your photo and your HTML file are saved in the same exact folder.
- If there are any spaces in the photo file name, delete them or replace with a dash or underscore. (Avoid spaces in all your file names.)
- Make sure the file name in your HTML matches the actual photo file name exactly. For example, myphoto.jpg is not the same as myphoto.jpeg.
10. In <p> tags, add a photo credit below your photo. Make that text also a link back to the source of the photo by using an <a>anchor tag:
<a href="http://yoursavedURLgoeshere">Text</a>
11. There are many other tags you can use to insert elements and define them. For example, you can use <strong> to make words or phrases bold, or <em> for italics. Try out at least one additional style within the dummy text on your page. This reference page has additional options: HTML Text Formatting
When you finish this section, your page should look approximately like this:
Part 2: Styling with CSS
HTML structures code for the benefit of both humans and machines, such as a Google indexing bot figuring out what your page is about. CSS is mostly for the benefit of humans — this is what makes a page visibly organized and styled. For example, here is the top headlines portion of the New York Times website with and without the CSS applied:
For now, we’re going to focus on mostly superficial changes, like colors and fonts.
1. We’re going to put our CSS code in the same HTML file you started in Part 1, which is called internal CSS. (It’s more common to save CSS separately in its own file, which we’ll try in the next assignment.)
Inside the <head> portion of your HTML file, add an opening <style> tag and closing </style> to define the area that will contain CSS code.
2. CSS is applied by choosing an HTML element to style and then adding rules about how that element should appear. We’ll start with a dramatic change for the background of your page by styling the body, meaning the entire visible portion of your webpage.
body {background-color: red;}
Save your document and view it in your web browser. The entire website should now have a bright red background. This is not good for readability. We’ll come back to this later on to choose more appropriate and appealing colors. There are several ways to define colors in CSS — along with a list of color names accepted by all browsers, you can also specify any color using its six-digit hex code. For example, you can also make the background red by using the #FF0000 hexadecimal value for red:
body {background-color: #FF0000;}
3. You can add multiple style rules to a single element, such as the body. If they contradict, the last one listed will be the one that applies. This is the “cascading” part of “Cascading Style Sheets.”
Add a rule after the background-color rule for color, which will apply to all text. Make the text blue and preview this in the browser.
Now add a copy of that color rule and change it to white. Now when you preview the page in the browser, the text will be white.
4. Text can be styled differently by assigning styles to the different tags. By default, most browsers show h1 text as larger than h2 text, but that can be changed with CSS. Here is a style rule changing the font, size and color of h1 text:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 40px;
color: lightblue;
}
This style rule can be listed right after the previous body style rule. Note the syntax with curly brackets, semicolons, and quotation marks before commas. If anything with your CSS is not working, it’s likely a minor punctuation issue.
5. You can also use CSS to style the <img> element on your page. Here is a style rule that changes the size of the image and adds a border:
img {
width: 400px;
border: 5px solid magenta;
}
Preview this in your browser to see how the size of your images has changed. Now change the width property to a percentage instead of a specific number of pixels: width: 40%
Preview this in the web browser and try adjusting the size of the window. As you make it wider or narrower, the image will change size so it is always 40% of the total width. This is a fundamental part of responsive design, meaning websites that adjust based on the size of your screen.
6. It’s a common practice to make links look different from the other text on a page, or to change the appearance of the text when users hover on the link. This is done with a set of rules styling <a> elements:
a {
color: turquoise;
text-decoration: none;
}
a:hover {
color: springgreen;
text-decoration: underline;
}
7. Now it’s time for you to try out styles and make this page look more appealing. You should:
- Change the background color
- Change the color of the image border and link
- Change the font and at least two other attributes for each text style on your page (h1, h2, p)
- Make the page readable and attractive overall
Helpful resources, tools and lists:
• Color names supported by all browsers
• Hex code color picker
• List of web-safe fonts and combinations
• Reference for all CSS properties
You may want to try out line-height, which is the web equivalent of leading, or letter-spacing, which is the web equivalent of kerning.
When you finish this section, your page should look very roughly like this, though you will have different style choices:
Submitting Your Work
Submit the following to Blackboard by going to “Assignments” and uploading the files with your submission:
- The compressed .zip folder containing your .html file and image file
Demonstrated Skills:
- Understand built-in hierarchy of HTML text tags including h1, h2 and p
- Understand directories and paths for connecting web content
- Use HTML to add text, an image and a hyperlink to a webpage
- Apply and customize CSS rules to apply visual styles to text and images