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. luogu P2117 小Z的矩阵（结论题）

    题意 题解 这题有点水. 我们发现对答案有贡献的实际上只有左上到右下的对角线上的数. 因为不在这条对角线上的乘积都要计算两遍,然后%2就都没了... 然后就做完了. #include<iostr ...

  2. HDU 2295 Radar 重复覆盖 DLX

    题意: N个城市,M个雷达站,K个操作员,问雷达的半径至少为多大,才能覆盖所有城市.M个雷达中最多只能有K个同时工作. 思路: 二分雷达的半径,看每个雷达可以覆盖哪些城市,然后做重复覆盖,判断这个半径 ...

  3. SSH的理解

    SSH的利用,通俗的讲就是一个网络传输数据的加密协议,目前有一些基于SSH的构建了服务器-客户端的软件工具,在Windows上装一个客户端,Linux上则为服务端,这样就可以把Windows上写的内容 ...

  4. ASP.NET-ajax.BeginForm使用02

      Ajax.BeginForm中OnFailure.Onsuccess.OnComplete函数是可以处理从后台返回的数据的,比直接使用jquery的$.ajax方法还要节约时间   @using( ...

  5. 破解者是如何篡改游戏内数值的，揭秘Android手游破解全过程

    由于Android系统的开放性,让人人都是开发者成为可能,也正因如此,手机APP遭受破解和盗版问题长期存在,且愈演愈烈.尤其是手游 行业,如刀塔传奇.植物大战僵尸.2048等知名游戏被破解的案例不胜枚 ...

  6. quick-cocos2d-x游戏开发【2】——项目结构分析、创建新场景

    创建完一个新项目之后,我们能够简单的看一看这个项目的文件组成,有这么一个文件层次结构 几个proj.*目录就不用说了,是相应的平台的解决方式,res专门存放我们的游戏资源.scripts存放我们的lu ...

  7. Qt 3D教程（二）初步显示3D的内容

    Qt3D教程(二)初步显示3D的内容 前一篇很easy,全然就没有牵涉到3D的内容,它仅仅是我们搭建3D应用的基本框架而已,而这一篇.我们将要利用它来初步地显示3D的内容了! 本次目的是将程序中间的内 ...

  8. HTML5 canvas炫酷棱镜效果的幻灯片特效

    这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面 ...

  9. 错误处理：java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter

    部署项目时,启动Tomcat一直出错:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter SEVE ...

  10. 10gR2 rac怎样重跑root.sh ？

    原文博客链接地址:10gR2 rac怎样重跑root.sh ? 前几天遇到一客户的10205 rac,出现LMD进程IPC SEND TIMEOUT问题. 准备深入研究下Oracle RAC 的LMO ...