Creating Web Content

Skip to section:  HTML | CSS | Inspect web page code | WYSIWYG editors

HTML

Hypertext Markup Language (HTML) is the foundation for everything you see on the web. A link to the UCB Library looks like this in HTML:

<a href="http://lib.berkeley.edu">UCB Library</a>

While it can seem intimidating, the basic structure is quite simple. First there is a tag, <a href="...">, followed by some content, UCB Library, and completed with a closing tag </a>. Notice all of the opening <...> and closing </...> tags in these examples:

  • Headers <h1>Title of the page</h1>
  • Paragraphs: <p>These will put line breaks before and after the text.</p>
  • Lists: <ul><li>1st bullet point</li><li>2st bullet point</li></ul>>

​Activity: Edit some HTML!

  1. Walk through the following interactive tutorials at learn-html.org:

CSS

What is it?

Cascading Style Sheets (CSS) are like a rulebook for the design of your website. CSS makes it easy to tinker with the look and feel of your site -- for example, change one line of code and all your text will turn blue. It also ensures consistency across your site; for example, with CSS you can be certain that all your page titles are the same size, color, and font.

How does it work?

There are three ways to add CSS to your site:

  1. Add CSS to your HTML tags ("inline") to control how an individual element looks.
  2. Add it to your page's Head section to make rules apply across the whole page.
  3. Or best, link to a separate CSS file to manage the design of an entire site.

Examples of Inline CSS

This text is blue.

<p style="color:#4437E0">This text is blue.</p>

This text bigger and in shouty caps.

<p style="font-size:16px;text-transform:uppercase">This text bigger and in shouty caps.</p>

I created a box around this text.

<p style="padding:5px;background-color:#E0b937;border:1px #665314 solid">I created a box around this text.</p>

Activity: Make Basic Inline CSS Changes

  1. In a plain-text editor (TextEdit, Notepad), open a new plain-text file and save it with the file extension .html.
  2. Add this html code: <p>This is my paragraph.</p>
  3. Using inline CSS, make the text 34 pixels in size, green, and all uppercase. (Hint: to find the right CSS for these changes, browse the W3 schools guidelines.)
  4. Open your .html file in a web browser like Chrome, Safari, or Firefox. Did your CSS changes work?

Answer key

Learn More about CSS:

Upcoming HTML & CSS Workshops:

Inspect this page

Have you ever wished you could see the code behind the webpage? You can!

Why inspect a webpage?

  • Learn how other web developers create their pages.
  • Troubleshoot your own pages.

Option 1: View Page Source

  • Use to view the HTML behind a page.
  • Option located in the menus of most browsers. (Note: In Safari, you will need to enable the Developer menu in your preferences.)
  • Instructions for Chrome: From the View menu, go to Developer, then View Source.

Option 2: Web Inspectors

  • Web inspectors and other developer tools give you a dynamic and interactive view into a webpage’s code.
  • See how HTML, CSS, and JavaScript interact with each other.
  • Find where the code corresponds to a specific part of the webpage.
  • Preview how changes in the code will look in the browser.
  • Web inspector tools are available in most browsers. (Note: In Safari, you will need to enable the Developer menu in your preferences.)
  • Instructions for Chrome: From the View menu, go to Developer, then Developer Tools. An interactive sidebar will appear.

Activity: Inspect a Page!

  1. View the Page Source of this simple webpage.
  2. Can you identify the HTML tags and their meaning?
  3. Now, inspect the page using your browser’s more advanced developer tools. These may be called web inspectors, inspectors, or developer tools in your browser’s menu.
  4. Use the inspector to match code to different parts of the page.
  5. In the code view, double click on an HTML tag or CSS style to make it editable. Make changes to the code and preview how they look on the page. Note: You’re only tinkering with how your browser views the webpage at this moment. You’re not editing the webpage itself!

WYSIWYG

A What-You-See-Is-What-You-Get editor, or WYSIWYG (pronounced whizzywig), allows you to create content with a simple user interface, instead of manually writing out HTML and CSS.  WYSIWYGs are surprisingly powerful tools for online writing, whether you're using email clients like Gmail, posting content to bCourses, blogging or posting on social media.

Let's take a closer look at a few common features of WYSIWYGs to help you create richer content and communicate more clearly online.

Using a Gmail Editor

What do all of the buttons do when you compose a Gmail (or Berkeley email) message? Most of us know how to add a link or an attachment to our emails, using the buttons at the bottom of a Gmail message you're composing. 

The Gmail interface offers options to attach a file, and add a link, along with much more.

But have you explored all of the formatting options by selecting the A button before?

Activity: Formatting a Gmail message

Take a look at the image below, from a Gmail message. Can you identify what each button in the A formatting panel, from left to right, accomplishes? If you're unsure, go to your Berkeley email, compose a new message, write and highlight some text, and then try each button to test it out!

Gmail editor buttons to change fonts, bold, italics, underline, change colors, format text, create lists, add quotes, and clear formatting.