{"id":189,"date":"2017-09-27T03:53:08","date_gmt":"2017-09-27T03:53:08","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh101f17\/?page_id=189"},"modified":"2017-11-01T13:07:39","modified_gmt":"2017-11-01T20:07:39","slug":"build-a-web-page-from-scratch-with-html","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh101f17\/tutorials-guides\/web-publishing\/html-css\/build-a-web-page-from-scratch-with-html\/","title":{"rendered":"Build a web page from scratch with HTML"},"content":{"rendered":"
\n

HTML is the language that web browsers (like Firefox, Chrome, and Safari) understand. It’s 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’re curious.)<\/p>\n

It’s not too hard to learn, and it’s fun! 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<\/div>\n

\n

Get set up<\/h3>\n

\"\"<\/a><\/p>\n

<\/div>\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 “untitled.”<\/em><\/p>\n

Atom<\/strong>\u00a0is 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’t (invisibly) surround your text with formatting information. So never\u00a0use Microsoft Word for your code! Instead, use Atom or one of the many alternatives, like\u00a0Sublime<\/a>.<\/p>\n

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

\n

Enter the document declaration and a little bit of text<\/h3>\n
\n
\"The<\/a>
The text won’t 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<\/div>\n
\n

A\u00a0document declaration<\/strong>\u00a0gives instructions to the web browser (like Safari or Firefox) for how to handle the document you’ve created. Luckily, they’re easy to make. Just type<\/p>\n

<!DOCTYPE html><\/pre>\n
at the very top of the document.<\/p>\n
Then press\u00a0return\u00a0<\/strong>and type in<\/p>\n
<html><\/pre>\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
<\/html><\/pre>\n
(Your browser won’t care about spaces and returns inside the header.)<\/p>\n
It’s considered good practice to divide up your webpage into\u00a0head<\/strong>\u00a0and\u00a0body\u00a0<\/strong>sections. Special instructions for the browser (if you have any) go in the head section. Content goes in the body section.<\/p>\n
To make these sections, press\u00a0return<\/strong>\u00a0and enter<\/p>\n
<head><\/pre>\n
somewhere inside your opening and closing <html> tags.<\/p>\n
After you create your head tag, leave a line or two blank and close your head tag by typing<\/p>\n
<\/head><\/pre>\n
Now make the\u00a0body<\/strong>\u00a0section. Below your\u00a0<head><\/strong>\u00a0tag, type<\/p>\n
<body><\/pre>\n
Then skip a few lines and type<\/p>\n
<\/body><\/pre>\n
Let’s put some text in, too, so we have something to look at. Type<\/p>\n
<p>Welcome to my webpage<\/p><\/pre>\n
after your opening body tag and before the closing body tag. Perhaps you remember what\u00a0<p><\/strong>\u00a0stands for:\u00a0paragraph<\/strong><\/p>\n
Save<\/strong>\u00a0your document as\u00a0index.html<\/strong>, somewhere you can locate it again easily.<\/p>\n
Leave your Atom document open<\/strong>\u00a0and navigate to where you saved the file. Double-click the icon for the file you saved. By default, that\u00a0file should open up in a browser. Now you’ve opened the file in two different ways: as a webpage and as a text file. Arrange your windows so you can see the document open as a text document and as a webpage, simultaneously.<\/p>\n
On your text document, alter the text between the paragraph tags so that it says something different and\u00a0save\u00a0<\/strong>the document. Now click\u00a0Refresh<\/strong>\u00a0on your web browser. The text on the webpage should show the new text you’ve saved.<\/p>\n<\/div>\n<\/div>\n
\n
Add a header<\/h3>\n
\n
\"media_1445881809528.png\"
I know the text editor looks different in this image than it does in previous images. I switched text editors, but you’ll still use Atom, so your text editor will look as it does in previous images.<\/figcaption><\/figure>\n<\/div>\n
\n
By default, headers instruct browsers to treat text inside differently, to signal that it’s important. Add a header to your page by putting some text in<\/p>\n
<h1><\/pre>\n
tags, somewhere above your paragraph tags. Save the document and refresh your browser. You should now have a header on your page! Looking good.<\/p>\n
You can also use<\/p>\n
<h2><\/pre>\n
tags, which are a bit smaller, and<\/p>\n
<h3><\/pre>\n
tags, which are smaller still, all the way to<\/p>\n
<h5><\/pre>\n
tags. Experiment with different-sized headers, saving and refreshing as you go.<\/p>\n<\/div>\n<\/div>\n
\n
How links work<\/h3>\n
\"media_1445643187364.png\"<\/div>\n
\n
What’s a webpage without a link? They work like this:<\/p>\n
<a href=\"www.google.com\">text of your link<\/a><\/pre>\n
In the example above,\u00a0www.google.com<\/strong>\u00a0is the URL to which you want to link and\u00a0text of your link<\/strong>\u00a0is the text that actually appears as a hyperlink.<\/p>\n<\/div>\n<\/div>\n
\n
Create a link on your page<\/h3>\n
\"media_1445881956409.png\"<\/div>\n
\n
Try it yourself by creating a new paragraph (using the opening and closing <p> tags) and creating a link in your new paragraph. Save your document, refresh your browser and test your link!<\/p>\n<\/div>\n<\/div>\n
\n
How images work<\/h3>\n
\"media_1445643753324.png\"<\/div>\n
\n
You can link to an image in one of two ways. If there’s an image out there on the Web that you’d like to embed on your page, you can grab the link to the image by right-clicking on the image and clicking\u00a0Copy Image URL<\/strong>. Then you can embed the image by pasting the link, as above.<\/p>\n
If you have an image on your computer that you’d like to use, you can save it\u00a0at the same place where your html file is saved<\/strong>\u00a0and link directly to it by entering the file name, as above.<\/p>\n<\/div>\n<\/div>\n
\n
Add an image<\/h3>\n
\"media_1445882026340.png\"<\/div>\n
\n
Add an image to your webpage using one of the two methods from the previous step.<\/p>\n<\/div>\n<\/div>\n
\n
Add some emphasis<\/h3>\n
\"media_1445882087519.png\"<\/div>\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
<em><\/pre>\n
(which stands for\u00a0emphasis<\/strong>; by default, your browser will italicize the text inside this tag) and<\/p>\n
<strong><\/pre>\n
(by default, your browser will bold the text inside this tag).<\/p>\n
Create more text and experiment with emphasis and headers. Just remember to always close those tags!<\/p>\n<\/div>\n<\/div>\n
\n
But wait! No one can see your page!<\/h3>\n
\"media_1445644435551.png\"<\/div>\n
\n
If you look closely at the URL on your webpage, you’ll see that it looks funny: it starts with<\/p>\n
file:\/\/\/<\/pre>\n
not<\/p>\n
http:\/\/<\/pre>\n
That’s because you’re working on your file\u00a0locally<\/strong>, meaning just on your own computer. No one else can see your webpage at the moment.<\/p>\n
In order for other people to see your file, it has to be\u00a0hosted on a server<\/strong>, meaning moved to a special computer whose job is to broadcast files to the internet. You don’t have a server yet, but you will on Friday. Francesca or Dustin will show you how to purchase server space and move your file to a server.<\/p>\n
For now, though, you did it! You built a webpage! It’s still not very pretty, though.\u00a0Let’s decorate it in the next tutorial!<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
HTML is the language that web browsers (like Firefox, Chrome, and Safari) understand. It’s a\u00a0markup language, meaning you annotate content<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":43,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/43"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}