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. JavaScript内存机制

    内存模型 JS内存空间分为栈(stack).堆(heap).池(一般也会归类为栈中). 其中栈存放变量,堆存放复杂对象,池存放常量. 基础数据类型与栈内存 JS中的基础数据类型,这些值都有固定的大小, ...

  2. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  3. java实现websocket 终极指南

    大概思路:  首先用户登陆  获取用户信息存储到httpsession中,然后客户端链接服务端websocket,首先HandshakeInterceptor这个拦截器会拦截请求 调用 beforeH ...

  4. Gitlab command line instructions

    Git global setup git config --global user.name "winner" git config --global user.email &qu ...

  5. Oracle学习总结（7）—— 常用的数据库索引优化语句总结

    不管是用C/C++/Java等代码编写的程序,还是SQL编写的数据库脚本,都存在一个持续优化的过程.也就是说,代码优化对于程序员来说,是一个永恒的话题. 近期,我们对之前编写的数据库脚本进行了全面的自 ...

  6. UVA Foreign Exchange

    Foreign Exchange Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Your non ...

  7. 深度学习系列之ANN

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3F0aGFoYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  8. WET Dilutes Performance Bottlenecks

    WET Dilutes Performance Bottlenecks Kirk Pepperdine THE IMPORTANCE OF THE DRY PRINCIPLE (Don't Repea ...

  9. _00020 妳那伊抹微笑_谁的异常最诡异第一期之 SqlServer RSA premaster secret error

    博文作者:妳那伊抹微笑 博客地址:http://blog.csdn.net/u012185296 博文标题:_00020 妳那伊抹微笑_谁的异常最诡异第一期之 SqlServer RSA premas ...

  10. PIC18F4520 + NRF24L01

    SI SO应该对调过来用.. TX /* ** Tx.c ** Transmit test program for PIC18F4520 and nRF24L01 or nRF24L01+ ** Us ...