Presentation is loading. Please wait.

Presentation is loading. Please wait.

Section 1 Basic concepts of web page

Similar presentations


Presentation on theme: "Section 1 Basic concepts of web page"— Presentation transcript:

1 Section 1 Basic concepts of web page
WTU 2019/12/17 wtu

2 1. Website Definition How to access a website How to start
It is a collection of web pages that display specific contents on Internet. How to access a website Using the browser, such as Safari, Chrome, IE How to start Enter the web address in the browser address bar, and then access it directly Use search engines (such as Baidu) to find the website, and then click on the link to access it 2019/12/17 wtu

3 2. Website category Portal site: sina, 163, …
E-commerce site: tmall, jd, … Video site: iQiy, youku, … Company site: to promote the brand and release products… Download site: PConline, ZOL, … Search engine site: baidu, google, … 2019/12/17 wtu

4 3. Webpage Definition A webpage is a file
It is the carrier of information A webpage is a file It is stored in the website, we can read its content by the browser For a remote file, how to read in our computer? In a website, every page you see is a webpage Technology about web design and development HTML CSS Javascript 2019/12/17 wtu

5 4.Basic structure of the webpage
There are two ways to view web pages browser the effect developers want to present to users Editor software( note pad) We can not only read by editor, but also edit a webpage Using this way, what we see is the code of a webpage Code of webpage Using HTML(Hyper Text Markup Language)to write 2019/12/17 wtu

6 4. Basic structure of the webpage(con.)
Example <html> <head> <title>Welcome to my first page</title> </head> <body> This is a simple page </body> </html> <html> is begin of a markup, </html>is end of it Tell the browser the contents between them are the HTML codes, and then the browser will run these codes using HTML rules A webpage has two basic part head Show the document information of the webpage, such as title, we can using the markup <tilte> to show the tilte of a webpage body The contents are written between <boyd> and </body> will be shown the browser when the webpage is opened 2019/12/17 wtu

7 5.windows记事本编写网页 1.直接在记事本中输入代码 2.保存 3.保存完之后就会在所在位置产生一个网页文件
注意:输入标签关键字及左右尖括号时必须为英文输入状态! 2.保存 3.保存完之后就会在所在位置产生一个网页文件 一定要记住你保存在那里! 2019/12/17 wtu

8 5.windows记事本编写网页(续) 4.重新编辑 找到网页文件,然后再文件上右键,选记事本打开
先打开记事本,然后“文件”-“打开”找到网页文件,而且在打开界面的文件类型一栏要选定所有文件,否则记事本会默认只找txt结尾的文本文件 2019/12/17 wtu

9 6.苹果textedit编写网页 1、打开textedit 2、改成纯文本模式,如下图
打开textedit默认是富文本编辑模式,类似word,但用textedit编写网页,要用纯文本模式,所以要改成纯文本模式 2、改成纯文本模式,如下图 2019/12/17 wtu

10 2(续)、改完后如下图所示 3、在编辑区写代码 此时编辑区仅仅只能输入字符,上部没有设置大小,颜色等的快捷按钮了 2019/12/17
wtu

11 4、保存 2019/12/17 wtu

12 4(续)、存储时要输入文件名及 扩展名,扩展名使用html,比如s01.html
点击存储后,会有如下确认,继续点击以保存 2019/12/17 wtu

13 5、重新编辑网页,也就是关闭textedit后,再用textedit打开网页文件的方法
A)打开,如下 B)点选项,如右 2019/12/17 wtu

14 5(续) C)选中“忽略多信息文本命令”,然后选中要打开的文件,如下图的s02-1,最后点击“打开”按钮打开选中的文件,这样看到的就是网页的代码 2019/12/17 wtu

15 7. Run webpage When a web page is edited and saved as a file suffixed with html, it becomes a webpage file Run webpage Just open it by the browser Two way: 1)double click a webpage file, it will be open by the default browser; 2)open the browser firstly, then use open command to open a webpage file Q1: The markup can be seen in the browser? Q2: What is the markup used for? 2019/12/17 wtu

16 Exercise Using the note pad to write a webpage, and run it by your browser. Include Title: Wuhan Textile University Content: Welcome to Wuhan, China. 2019/12/17 wtu


Download ppt "Section 1 Basic concepts of web page"

Similar presentations


Ads by Google