UNDERSTAND TERMINOLOGY You will soon be writing code to create a web page. When getting started with a new technology there are different terms you will need to be familiar with. While your vocabulary will expand as you continue to grow as a web developer, there are certain core concepts which will help you get started. WHAT A WEBPAGE AND WEBSITE ARE Web pages, HTML pages, or simply pages are similar to a page in an e-book. They are a single screen that displays information. You might scroll up and down on the page, but it's made to be a collection of similar data. Software developers create pages in HTML files. A file is like a document you might create in a word processor. Instead of writing in a language like English or Spanish, you create files using the languages designed for websites. In web development, a web page can be a single file or the result of bringing two or more files together. In the next section, you'll learn about the different files that can be used to create a web page. A website is a set of pages. Returning to our e-book analogy, the e-book itself would be the website. It has all of the pages and is read by a user one page at a time. A website could be a single page, thousands of pages, and everything in between.
Creating a Web Page Web pages are mostly created with a combination of three languages - hypertext markup language (HTML), cascading style sheets (CSS), and JavaScript. These languages might exist all in one file. But they can be separated across multiple files. Many "assistant programs" (called frameworks) exist to help. At their core, though, they all make HTML, CSS, and JavaScript. Like all programs, HTML, CSS, and JavaScript alone can't do much (and they can be hard to read). They need a tool that can "read" them and know what to do with them. The web browser is an example of just such a tool. THE DIFFERENCES BETWEEN HTML, CSS, AND JAVASCRIPT HTML HTML tells the web browser what to do with the information on the page by using markup. Markup displays certain parts of text in a specific way. Some text needs to be bold or italic. Some text needs to be in a table. HTML tags tell the browser what to do. If you want the browser to bold something, you would write it like this in HTML: The "strong" tags tell the browser that the text in between should be bold. It would appear as bolded text when you view it in a browser: CSS CSS adds more style to the page, like what color to make something or what font to use. CSS has become very powerful. It can even tell the browser where the information should be displayed on the page. JavaScript Finally, JavaScript lets you do things to items on a page. JavaScript can tell the browser to create things like buttons or to display the date. But a script also tells the browser what to do when the button is clicked, like submitting data in a form. EXPLORE CORE HTML Hypertext Markup Language, or HTML, is the core language used to create a web page. HTML is used to describe the information to display to the user. HTML tells a browser how to display text. Introducing Tags and Elements If you've ever had to format text like make it bold or enlarge the font, you may not have thought about what goes on "behind the scenes."
When you experience text on a web page, the browser does the work to format it using code. HTML code is behind what is displayed. The code tells the browser what to do to make the text appear the way it does. As we learned in an earlier unit, when a web page has bolded text, the HTML code words that tell the browser to make the text bold are called tags. Tags surround the text that needs to be displayed in a specific way or transformed. Tags typically have a start and an end, with text between them. A tag and any content between the open and close is called an element. • This is an open tag to make something bold: <strong> • This is a closing tag to make something bold: </strong> • This is an element: <strong> Make me bold </strong> Headers are common elements that are numbered one through six, with one being the top of the hierarchy and six being the lowest. These are written as h1 through h6. If you want to add a top-level heading to a page to display the word Resume, you could use: The example below demonstrates how HTML gets transformed by browsers into formatted information.
Learning How to Use Tags There are many tags available for programmers to use. Knowing which ones are available and how they're used is called syntax. At this point, we won't get bogged down in the details. What's important is that you understand what a tag is and how it's used to make up an element. CREATE YOUR FIRST HTML PAGE In this exercise, you'll begin creating the web page for your resume. You'll start by adding some high-level information such as your name and section headers. You'll also add a few comments, which we will use as markers of where to add information in a later exercise. This exercise uses vscode.dev - a web-based version of Visual Studio Code and CodeSwing. These tools help streamline the development process. No local installation is required to complete the exercises below. Create an HTML page with CodeSwing You'll start by creating a folder, setting up your tooling, and creating a "swing" using CodeSwing in vscode.dev. A swing will automatically display the results of your code you author in vscode.dev. This allows you to quickly make modifications and the updates will happen in real time. 1. Create a folder on your desktop named resume. 2. Open vscode.dev. 3. Select Open Folder. 4. Navigate to the resume folder you created earlier and select Select Folder. 5. When prompted to Let site view files, select View Files.
6. Select the Extensions button 7. In the Search Extensions in Marketplace text box, type CodeSwing. 8. Select Install to install CodeSwing.
9. Open the Command Palette by selecting Ctl-Shift-P or Cmd-Shift-P on a Mac. 10. Type CodeSwing in the Command Palette and select CodeSwing: New Swing in Directory.... 11. Select Select Folder to use the current directory (which is the one you created in a prior step). 12. Select Basic: HTML-Only. 13. When prompted to Save changes to resume select Save changes. Visual Studio Code will create two windows side by side. The left will be your editor, where you can enter your HTML. The right will behave like a browser, displaying the results of your HTML code.
Add HTML to create the structure of your page Next, you'll add the HTML to create the structure of your page. You'll create the three main elements of html, head, and body. Inside the body, you'll add a section that will contain general information about you such as your name and social media information. You'll then add sections that will list your education and experience. Feel free to replace Your name with your name. In other exercises, you'll create lists and links to your email address, social media handles, and education and experience. After adding the code, you'll review what code has been added. 1. Inside index.html, add the following HTML: Each of the elements in the HTML does specific things. The following table describes the tags you used in your HTML and how the browser understands them.
2. As you type, the page will automatically update; the final result will appear similar to the following:
Reviewing the code Every HTML page has html as the root core element, with all content contained inside of it. html normally has two direct children, head that contains metadata, and body that contains the information to be displayed. Notice how you only use one h1 element for your name, and h2 elements for headers for each of the sections. This is to help highlight the most important parts of the page. Your name is the most important piece of information on the page; thus it gets top billing with h1. Finally, there are comments for email address, social media, education, and experience. These are being used as placeholders and will be replaced in a later exercise in this module. RESEARCH LINKS LISTS IN IMAGES The word "hypertext" means you can display more than just text on a web page. HTML offers the ability to create links to other resources and add images to a page. Hyperlinks Hyperlinks (or just links) allow a user to navigate to other things. This could be another page on your website, a completely separate website, or even an email address. One of the main goals of HTML was to allow these "pointers" to be added to a page for easy access. This is done through links. The tag used to create a link is a, which is short for anchor. The content between the open and close a tag becomes hypertext that enables a user to access the resource. The resource being referenced is indicated by using an attribute called href (or hypertext reference). Attributes are added inside the opening tag and are typically a name paired with a value (called key-value pairs) with the value contained in quotes. Key-value pairs are used in forms. If you fill out a form, you may be asked for your first name and last name separately. The form will have a label First name and a blank space and another label Last name and a blank space. The labels are like keys in HTML attributes, and whatever you put in the blank space is the value. In HTML attributes, the key and the value are joined by an equal sign to show they belong together. Resource Indicators There are many types of resources a link can point to. Many times links point to other web pages or websites. But a link also can point to an email address, a file (like a PDF document), a video, or an image. To create a link to an external site, you use the full address of the site. For example, to create a link to Microsoft's documentation site, you could use:
It's possible to link to an email address. This type of link will automatically open the user's email client and complete the To field with the address indicated after the mailto: directive. Accessibility and Links If you put a link in the HTML page you're creating, you'll notice that the text between (not inside) the opening and closing tag turns blue. You'll also notice that the address is hidden. Finally, you'll notice that the word is now selectable. That is, you select the word to be taken to the resource. The text that is displayed as the link is known as link text. Using good link text is a key to ensuring your page is accessible to all users. Phrases like "click here" are disruptive to screen readers and other non-browser tools used to navigate the web. As a best practice, always use link text that briefly describes the resource being referenced. You can learn more about ensuring accessibility by exploring the Accessibility Learn module. Images The img tag is used to display images on a page. Unlike most other elements, img has no closing tag. The src attribute is used to point to the location of the image to display on the page, and the alt describes the contents of the image for things like search engines and screen readers. Important While the height and width attributes can be used to specify the display height and width of the image, they do not resize the image file itself. The best practice is to make the image file the dimensions you will use on the page. Creating Lists You will quite frequently need to display a list of information on a page. When building your resume, you will want to list prior roles or qualifications. HTML provides two different types of lists, ordered and unordered. To create a list, you will first decide the type of list you wish to create. An ordered list is ordered with numbers (the default) or letters and uses ol for ordered list. An unordered list uses bullet points and is identified with ul for unordered list. The items are indicated with li for list item.
Unordered List The following creates an unordered list: The list generated: • First item • Second item • Third item Ordered List The following creates an ordered list: The list generated: 1. First item 2. Second item 3. Third item ADDING LISTS LINKS TO YOUR HTML PAGE Add the rest of the information to your resume. You'll include your email address, social media links, and list of experience. The exercise will use generic text, but you should feel free to customize the content to match your details. Add Your Email Address and Social Media Let's start by adding your email address and social media links to your resume. 1. Return to the browser window with vscode.dev.
Note If you closed your browser or CodeSwing, follow these steps to reopen your CodeSwing project. 1. Open vscode.dev. If you already have your html file open and just need to reopen CodeSwing, skip to step 6. 2. Select Open Folder. 3. Navigate to the resume folder you created earlier and select Select Folder. 4. When prompted to Let site view files, select View Files. 5. In the Explorer pane on the left, select the index.html file. 6. Press Ctrl + Shift + P on Windows or Linux or Cmd + Shift + P on Mac. 7. In the box that appears at the top, type codeswing: open swing and press enter or return on your keyboard. 8. When prompted, select the resume folder you selected earlier. 2. Inside index.html, and below the comment that reads <!-- email address -->, add the following HTML to add a link to your email, replacing [email protected] with your email address: 3. The page automatically updates with your email address. 4. Below the comment that reads <!-- social media -->, add the following HTML to create the list: 5. The page will update to display the list of social media accounts you add. Adding Education and Experience With the contact information added, you will now finish adding to your resume by including education and other experience. 1. Inside index.html, below the comment that reads <!-- education -->, add the following HTML for your education information:
2. Below the comment that reads <!-- experience -->, add the following HTML for your experience: 3. The window will update with your new information.