{"id":274,"date":"2022-01-19T00:09:37","date_gmt":"2022-01-19T00:09:37","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/is270s23\/?page_id=274"},"modified":"2022-03-09T20:16:16","modified_gmt":"2022-03-09T20:16:16","slug":"build-a-webpage-from-scratch-with-html","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/is270s23\/resources\/web-design\/build-a-webpage-from-scratch-with-html\/","title":{"rendered":"Build a webpage from scratch with HTML"},"content":{"rendered":"\n

You can also watch me do this on video.<\/a><\/em><\/p>\n\n\n\n

HTML is the language that web browsers (like Firefox, Chrome, and Safari) understand. It\u2019s a\u00a0markup language<\/strong>, meaning you annotate content with it so that the browser treats that content in different ways. (HTML\u00a0stands for\u00a0hypertext markup language<\/em>, if you\u2019re curious.)<\/p>\n\n\n\n

It\u2019s not too hard to learn, and it\u2019s fun! As always, the hardest thing about this tutorial will be arranging windows on your screen so that you can see everything at once! In one browser window or tab, leave this tutorial open so that you can refer to it as you proceed.<\/p>\n\n\n\n

A sidebar on web accessibility: The principles you\u2019ll learn today will create a website that is accessible to people using screen-reading software. But as you progress in your web development, you\u2019ll want to read more explicitly about accessibility. These<\/a> are the latest \u201cgold standard\u201d guidelines for accessibility, created by the W3C Web Accessibility Initiative.<\/p>\n\n\n\n

Create a folder to store your web documents<\/h3>\n\n\n\n
\"A<\/figure>\n\n\n\n

Putting all your website documents in one place will make it easier to stay organized. Create a new folder somewhere on your computer, preferably somewhere easy to find. You can give your folder any title you like. When you\u2019re dealing with code, though, avoiding spaces in file names often makes them easier to find.<\/p>\n\n\n\n

Get set up<\/h3>\n\n\n\n
\"The<\/a><\/figure>\n\n\n\n

Download Atom<\/a> and double-click it to open it. When you open Atom for the first time, three tabs will appear in the window. Please close all the tabs except for the one called \u201cuntitled.\u201d<\/em><\/p>\n\n\n\n

Atom<\/strong> is a (free) text editor, which is the name for the kind of program that you type code into. Just like Microsoft Word, it displays the text that you type. But unlike Microsoft Word, it doesn\u2019t (invisibly) surround your text with formatting information. So never use Microsoft Word for your code! Instead, use Atom or one of the many alternatives, like Sublime<\/a>.<\/p>\n\n\n\n

Believe it or not, a plain text editor (like Sublime) and a web browser (like Chrome, Safari, or Firefox) are all you really need to build even the fanciest webpage!<\/p>\n\n\n\n

Enter the document declaration and a little bit of text<\/h3>\n\n\n\n
\"A<\/a>
The text won\u2019t look all beautiful and pink like it does in this image until you save your Atom text file as an HTML document.<\/figcaption><\/figure>\n\n\n\n

In this step, we\u2019ll type our first HTML code. This is what you\u2019ll type:<\/p>\n\n\n\n

<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<\/head>\n\n<body>\n\n<p>Welcome to my webpage!<\/p>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
And here\u2019s what it all means:<\/p>\n\n\n\n
A document declaration<\/strong> gives instructions to the web browser (like Safari or Firefox) for how to handle the document you\u2019ve created. Luckily, they\u2019re easy to make. Just type<\/p>\n\n\n\n
<!DOCTYPE html><\/pre>\n\n\n\n
at the very top of the document.<\/p>\n\n\n\n
Then press return <\/strong>and type in<\/p>\n\n\n\n
<html><\/pre>\n\n\n\n
to tell the browser to expect HTML in the document that follows. Then skip a few lines and close<\/strong> your html tag by typing<\/p>\n\n\n\n
<\/html><\/pre>\n\n\n\n
(Your browser won\u2019t care about spaces and returns inside the header.)<\/p>\n\n\n\n
It\u2019s considered good practice to divide up your webpage into head<\/strong> and body <\/strong>sections. Special instructions for the browser (if you have any) go in the head section. Content goes in the body section.<\/p>\n\n\n\n
To make these sections, press return<\/strong> and enter<\/p>\n\n\n\n
<head><\/pre>\n\n\n\n
somewhere inside your opening and closing <html> tags.<\/p>\n\n\n\n
After you create your head tag, leave a line or two blank and close your head tag by typing<\/p>\n\n\n\n
<\/head><\/pre>\n\n\n\n
Now make the body<\/strong> section. Below your <head><\/strong> tag, type<\/p>\n\n\n\n
<body><\/pre>\n\n\n\n
Then skip a few lines and type<\/p>\n\n\n\n
<\/body><\/pre>\n\n\n\n
Let\u2019s put some text in, too, so we have something to look at. Type<\/p>\n\n\n\n
<p>Welcome to my webpage<\/p><\/pre>\n\n\n\n
after your opening body tag and before the closing body tag. Perhaps you remember what <p><\/strong> stands for: paragraph<\/strong><\/p>\n\n\n\n
Save<\/strong> your document to the folder you created in the first step. Name it index.html<\/strong>. By default, web browsers will look for an index.html file to display first.<\/p>\n\n\n\n
View your document in your web browser<\/h3>\n\n\n\n
\"Code
To display your index.html file in a web browser, simply double-click it.<\/figcaption><\/figure>\n\n\n\n
Leave your Atom document open<\/strong> and navigate to where you saved your index.html file. Double-click the icon for the file you saved. By default, that file should open up in a browser.<\/p>\n\n\n\n
Now you should have index.html open in two different ways: 1) as a webpage and 2) as a text file, displayed in Atom.<\/p>\n\n\n\n
Arrange your windows so you can see the index.html open as a text document and as a webpage, simultaneously.<\/p>\n\n\n\n
On your text document, alter the text between the paragraph tags so that it says something different and save <\/strong>the document. Now click Refresh<\/strong> on your web browser. The text on the webpage should show the new text you\u2019ve saved.<\/p>\n\n\n\n
Add a header<\/h3>\n\n\n\n
\"Displaying<\/figure>\n\n\n\n
By default, headers<\/strong> instruct browsers to treat text inside the tags differently, to signal that it\u2019s important. Add a header to your page by putting some text in<\/p>\n\n\n\n
<h1><\/pre>\n\n\n\n
tags, somewhere above your paragraph tags. (Remember to both open and close them.) Save the document and refresh your browser. You should now have a header on your page! Looking good.<\/p>\n\n\n\n
You can also use<\/p>\n\n\n\n
<h2><\/pre>\n\n\n\n
tags, which are a bit smaller, and<\/p>\n\n\n\n
<h3><\/pre>\n\n\n\n
tags, which are smaller still, all the way to<\/p>\n\n\n\n
<h5><\/pre>\n\n\n\n
tags. Experiment with different-sized headers, saving and refreshing as you go.<\/p>\n\n\n\n
How links work<\/h3>\n\n\n\n
\"Links<\/figure>\n\n\n\n
What\u2019s a webpage without a link? They work like this:<\/p>\n\n\n\n
<a href=\"www.google.com\">text of your link<\/a><\/pre>\n\n\n\n
In the example above, www.google.com<\/strong> is the URL to which you want to link and text of your link<\/strong> is the text that actually appears as a hyperlink.<\/p>\n\n\n\n
Create a link on your page<\/h3>\n\n\n\n
\"A<\/figure>\n\n\n\n
Try it yourself by creating a new paragraph (using the opening and closing <p> tags) and creating a link within your new paragraph. Save your document, refresh your browser and test your link!<\/p>\n\n\n\n
How images work<\/h3>\n\n\n\n
\"Images<\/figure>\n\n\n\n
You can link to an image in one of two ways. If there\u2019s an image out there on the Web that you\u2019d like to embed on your page, you can grab the link to the image by right-clicking on the image and clicking Copy Image URL<\/strong>. Then you can embed the image by pasting the link, as above.<\/p>\n\n\n\n
If you have an image on your computer that you\u2019d like to use, you can save it in the same folder where your html file is saved<\/strong> and link directly to it by entering the file name, as above.<\/p>\n\n\n\n
(When you enter the file name in an image tag, you\u2019re actually providing a path<\/strong> to an image: that is, telling your browser where to find the image in order to display it. Because you\u2019ve saved your image in the same place as your HTML document, you can just type the name of the file. Read more about paths here<\/a>.)<\/p>\n\n\n\n
You should also provide \u201calt text\u201d for your image: a brief description of an image for people who are using text-to-speech readers or in case your image breaks. The alt text won\u2019t be displayed unless the image breaks, but a person using a text-to-speech reader will be able to hear it. You can read more about writing good alt text here<\/a>.<\/p>\n\n\n\n
Add an image<\/h3>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Add an image to your webpage using one of the two methods from the previous step.<\/p>\n\n\n\n
Add some emphasis<\/h3>\n\n\n\n
\"Em<\/figure>\n\n\n\n
Sometimes you want to highlight particular text on your page, to indicate that the browser should treat it differently. Common tags for this are<\/p>\n\n\n\n
<em><\/pre>\n\n\n\n
(which stands for emphasis<\/strong>; by default, your browser will italicize the text inside this tag) and<\/p>\n\n\n\n
<strong><\/pre>\n\n\n\n
(by default, your browser will bold the text inside this tag). For example:<\/p>\n\n\n\n
<p>My students are <em>excellent<\/em> and <strong>awesome<\/strong>!<\/p><\/pre>\n\n\n\n
Create more text and experiment with emphasis and headers. Just remember to always close those tags!<\/p>\n\n\n\n
But wait! No one can see your page!<\/h3>\n\n\n\n
\"A<\/figure>\n\n\n\n
If you look closely at the URL on your webpage, you\u2019ll see that it looks funny: it starts with<\/p>\n\n\n\n
\/<\/pre>\n\n\n\n
not<\/p>\n\n\n\n
http:\/\/<\/pre>\n\n\n\n
That\u2019s because you\u2019re working on your file locally<\/strong>, meaning just on your own computer. No one else can see your webpage at the moment.<\/p>\n\n\n\n
In order for other people to see your file, it has to be hosted on a server<\/strong>, meaning moved to a special computer whose job is to broadcast files to the internet. You don\u2019t have a server yet, but you will in the fourth tutorial of today!<\/p>\n\n\n\n
Before we get to that, though, let\u2019s l<\/a>ook at how you can make your page look more exciting<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
You can also watch me do this on video. HTML is the language that web browsers (like Firefox, Chrome, and Safari) understand. It\u2019s a\u00a0markup language, meaning you annotate content with… Continue reading Build a webpage from scratch with HTML<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":272,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-274","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages\/274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/comments?post=274"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages\/274\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages\/272"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/media?parent=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}