Time to build your first HTML page by hand

I could go on with more theory and send half of you to sleep (trust me); instead you are now going to actually build your very first web page!

One of the best ways to learn something is to actually do it, so don’t worry if things are a little foggy for you right now, as we build the web page, things will start to clear up.

Step 1: Let’s write some HTML code

Open up a text editor like Notepad on Windows and type this (or: Note: Here’s a PDF that shows you how to create html documents on Mac):

<html>

    <head>

        <title>Your first hand coded page</title>

    </head>

    <body>

        <h2>Hand coding web pages is easy! </h2>

        <p>I would like to thank everyone who helped me type

                this page.</p>

    </body>

</html>

Step 2: Save the file as an HTML document

Save your HTML file (save it to your desktop so you will be sure to find it!)

using your text editor’s ‘Save as’ function and name the file webPage.html.

You can choose any name you want, as long as you follow these four rules:

  1. Web page names cannot have spaces in them: ‘web page.html’ is no good but ‘webPage.html’ is perfect.
  2. The name has to end with either .html or .htm; by ending the file name this way you are telling the computer that this is a web page and that it should use a web page reader / browser to view it.
  3. Don’t use funny symbol like: $, %, ^, & in your page names. Stick to standard letters and numbers.
  4. In Notepad, please save the file as UTF-8.

Step 3: Marvel at your work and view your page

You should be able to now just double-click on the page or open it up with your web browser by going to its “File” menu, then select “Open file” and select your page.

You should be able to see your page in all its glory!

Ok, not too much glory, but it was your first hand-coded page after all!

If you don’t see anything, then compare what you typed with the original I gave you and just go over the process again.

You will get it if you give yourself a chance!

If you’re not sure if what you created is looking like it’s supposed to, you can check out the final page here and compare it with your own.

Conclusion

Now that we’ve built our first web page, we can now move on to building our first web site.

Lesson 2 Building your first web page: Part 3的更多相关文章

  1. Lesson 2 Building your first web page: Part 1

    In this ‘hands-on’ module we will be building our first web page in no time. We just need to quickly ...

  2. Lesson 2 Building your first web page: Part 2

    Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...

  3. Building a RESTful Web Service(转)

    Building a RESTful Web Service This guide walks you through the process of creating a "hello wo ...

  4. 【转】Building a RESTful Web Service

    目标 构建一个service,接收如下HTTP GET请求: [plain] view plain copy   http://localhost:8080/greeting 并返回如下JSON格式的 ...

  5. 解读Web Page Diagnostics网页细分图

    解读Web Page Diagnostics网页细分图 http://blog.sina.com.cn/s/blog_62b8fc330100red5.html Web Page Diagnostic ...

  6. 网页细分图结果分析（Web Page Diagnostics）

    Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...

  7. Atitit.web三大编程模型 Web Page Web Forms 和 MVC

    Atitit.web三大编程模型 Web Page    Web Forms 和 MVC 1. 编程模型是 Web Forms 和 MVC (Model, View, Controller). 2.  ...

  8. [转]Calling Web Service Functions Asynchronously from a Web Page 异步调用WebServices

    本文转自:http://www.codeproject.com/Articles/70441/Calling-Web-Service-Functions-Asynchronously-from Ove ...

  9. Tutorial: Importing and analyzing data from a Web Page using Power BI Desktop

    In this tutorial, you will learn how to import a table of data from a Web page and create a report t ...

随机推荐

  1. UE4自学随笔（一）

    本文及后续均为个人学习记录所用,难免毫无章法零零碎碎,希望看到此文的诸君勿怪. 一.Actor与Pawn Actor类 在UE4中,Actor类是可以放到游戏场景中的游戏对象的基本类型.你如果想放置任 ...

  2. CF17E Palisection（manacher)

    题意 给出一个长度为N的字符串S,问S中有多少个回文子串对(i,j)使得i,j在S中的位置相交?(N<=2*106) 题解 #include<iostream> #include&l ...

  3. 一：1.2【print&input与变量和运算符】

    [路径] 绝对路径:从根目录开始链接的路径  --->cd C:\Windows\Boot\DVD\EFI\en-US 相对路径:不从根目录开始链接的路径 ----> cd Boot\DV ...

  4. SpringBoot实战（二）Restful风格API接口

    在上一篇SpringBoot实战(一)HelloWorld的基础上,编写一个Restful风格的API接口: 1.根据MVC原则,创建一个简单的目录结构,包括controller和entity,分别创 ...

  5. Asterisk[1]

    Asterisk[1]是一款GPLv2协议下的开源电话应用平台.简单来说,Asterisk是一个server应用.可以完毕发起电话呼叫.接受电话呼叫.对电话呼叫进行定制处理. 1.2.1 通道驱动 a ...

  6. 怎样实如今Windows下编写的代码，直接在Linux下编译

    方法一: 怎样实如今Windows7下编写Linux程序.写完程序以后.不用复制文件,直接在Linux(RHEL6.5)机器上编译最新的代码. 1.首先将Windows的代码目录设置为共享目录: 2. ...

  7. nyoj--311--完全背包（动态规划，完全背包）

    完全背包 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 直接说题意,完全背包定义有N种物品和一个容量为V的背包,每种物品都有无限件可用.第i种物品的体积是c,价值是w. ...

  8. 人生之清单（list of life）

    人生要走走停停,想想记记,修修改改,再向前走.国家工程,公平正义,一腔热血,都很容易燃起来,热血起来. 1. 没得选,有得选,怎么办 没得选 原生家庭,自己怎么生,怎样的父母: 遇见谁,会有怎样的对白 ...

  9. ARM嵌入式复习

    第一章 1.嵌入式系统 “以应用为中心,以计算机技术为基础,软硬件可裁剪,适用于应用系统对功能,可靠性,成本,体积,功耗要求严格的专用计算机系统” 根据应用的要求,沿着“体积小,低功耗,高可靠”方向发 ...

  10. Android--ViewPager-Fragment

    package com.cnn.viewpager02; import java.util.ArrayList; import java.util.List; import android.os.Bu ...