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. 计算机组成原理--64位CPU装载32位操作系统，它的寻址能力还是4GB吗？

    借由这个问题,今天我们就把 32 位 CPU.64 位 CPU.32 位操作系统.64 位操作系统之间的区别与联系彻底搞清楚.对于这个问题,博主也是一知半解了好长时间啊~ 基本概念 32位的CPU与6 ...

  2. CF504E Misha and LCP on Tree（树链剖分+后缀树组）

    1A真舒服. 喜闻乐见的树链剖分+SA. 一个初步的想法就是用树链剖分,把两个字符串求出然后hash+二分求lcp...不存在的. 因为考虑到这个字符串是有序的,我们需要把每一条重链对应的字符串和这个 ...

  3. luogu P3396 哈希冲突(分块？）

    我们可以维护一个\(f[i][j]\)代表%\(i\)意义下得\(j\)的答案.然后维护就炸了. 先设\(x=\sqrt{n}\)然后我们发现,当\(i>x\)时我们直接暴力复杂度为\(O(x) ...

  4. 比较排序算法（PHP）

    冒泡排序 两两比较相邻记录的关键字,如果反序则交换,大的数字往下沉,一直到最大的出现在数组最后 function swap(&$x, &$y) { $temp = $x; $x = $ ...

  5. HDU 4069 数独

    好久没做题了,建图搞了好久…… 然后,判是否有多解的时候会把原来的答案覆盖掉…… 这里没注意,弄了一下午…… 代码: #include <iostream> #include <cs ...

  6. Myeclipse学习总结（7）——Eclipse插件之Maven配置及问题解析

    前言: 今天在自己环境装了Maven环境, 并且安装了Eclipse插件, 在查找插件过程中确实遇到一些问题, 好不容易找到一个  却又有问题. 装好了插件之后, 用Eclipse创建Maven项目却 ...

  7. MySql5.7免安装版配置过程（ubuntu16.04)

    MySql5.7免安装版配置过程(ubuntu16.04) 原创 2017年02月07日 16:58:24 标签: 1001 编辑 删除 一.安装环境: 操作系统:ubuntu16.04 数据库:my ...

  8. 基于LevelDB的高可用ActiveMQ集群

    基于LevelDB的高可用ActiveMQ集群 http://donald-draper.iteye.com/blog/2347913

  9. 对jvm进行gc的时间、数量、jvm停顿时间的监控

    在jdk中一个类可以获得gc的信息: public static void main(String[] args) { List<GarbageCollectorMXBean> garba ...

  10. C++模板遇到iterator时候遇到的问题和解决方法

    今天开发的时候,发现用模板的时候,再加上iterator,会报错,如下: std::map<T, S>::iterator find_iter = mp.find(key); 编译会报错: ...