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. 异步调用task

    异步主要用来提升程序性能,会增加系统的开销(新建一个线程去执行异步任务). 可应用于耗时长的操作,比如:访问数据库时(应用程序和数据库不在同一台服务器上).服务之间的调用(服务会分散在不同的服务器上) ...

  2. BZOJ 4472 [Jsoi2015]salesman(树形DP）

    4472: [Jsoi2015]salesman Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 417  Solved: 192[Submit][St ...

  3. jQuery第四课 点击 _选项卡效果一

    //鼠标移到上面是显示手型cursor:pointer jquery 的函数: siblings //兄弟节点,同胞元素 :eq()选择器选取带有指定 index 值的元素.index 值从 0 开始 ...

  4. 一线 | 中国联通宣布首批5G手机到位

    腾讯<一线> 作者郭晓峰 据中国联通相关人士今日透露,中国联通用于 5G 友好体验的首批合作 5G 手机全部到位.有 12 个品牌共 15 款 5G 手机及 5G CPE,包括.华为. O ...

  5. apache源码编译安装

    源码安装apche 下载apache的源码包文件 访问http://mirror.bit.edu.cn/apache/httpd/,复制如下gz文件的链接地址,并使用wget下载到本地 wget -P ...

  6. dva基本用法

    1. npm install -g dva-cli 全局安装dva.2. dva new myApp --demo 创建dva项目.3. cd myApp npm start 启动项目.4. 定义 m ...

  7. NSURLConnection和NSRunLoop

    主线程中创建一个NSURLConnection并异步运行 [self performSelectorOnMainThread:@selector(start) withObject:nil waitU ...

  8. jni传递对象中包含arraylist对象。

    相信在使用jni的过程中,总是要传递各种各样的类型,在这其中,我也碰到了一些问题. 简单的传一些内容,相信在网上一搜一大把. 所以我们就来说说.传递对象中包含arraylist吧. 在这里先给大家一个 ...

  9. 使用isolation forest进行dns网络流量异常检测

    代码如下,测试发现,是否对输入数据进行归一化/标准化对于结果没有影响: import numpy as np from sklearn.ensemble import IsolationForest ...

  10. 熟悉了下HTTP协议

    HTML是一种用来定义网页的文本,会HTML,就可以编写网页: HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信.200表示一个成功的响应,后面的OK是说明.失败的响应有404 Not ...