Presentation is loading. Please wait.

Presentation is loading. Please wait.

Websites Creating Basic Course. What´s a website ? A website (or "web site") is a collection of related web pages, images, videos or other digital assets.

Similar presentations


Presentation on theme: "Websites Creating Basic Course. What´s a website ? A website (or "web site") is a collection of related web pages, images, videos or other digital assets."— Presentation transcript:

1 Websites Creating Basic Course

2 What´s a website ? A website (or "web site") is a collection of related web pages, images, videos or other digital assets that are hosted on one web server, usually accessible via the Internet. A web page is a document, typically written in (X)HTML, that is almost always accessible via HTTP, or less often HTTPS, a protocol that transfers information from the web server to display in the user's web browser. All publicly accessible websites are seen collectively as constituting the "World Wide Web". More informations : http://en.wikipedia.org/wiki/Website

3 What I need for the websites creating ? 1. MY BRAIN :-)

4 2. A some simple text editor – e.g. Windows Notepad What I need for the websites creating ?

5 1. MY BRAIN :-) 2. A some simple text editor – e.g. Windows Notepad 3. Web browser – Mozilla, Internet Explorer, Opera, … What I need for the websites creating ?

6 1. MY BRAIN :-) 2. A some simple text editor – Windows Notepad,... 3. Web browser – Mozilla, Internet Explorer, Opera, … 4. Internet connection (but I can use later...) What I need for the websites creating ?

7 1. MY BRAIN :-) 2. A some simple text editor – Windows Notepad,... 3. Web browser – Mozilla, Internet Explorer,... 4. Internet connection (I can use late …) 5. Theme, topic – my family, school, hobbies, friends, problems What I need for the websites creating ?

8 and at last : Basic knowledge and experience of work on a PC - how to make a directory, to copy of files,... What I need for the websites creating ?

9 Web page is a document - written as a text and containing instructions in special language called HTML – Hyper Text Markup Language. An example of HTML source code : My first web page My first web page. And some other text or pictures. How can I say informations about the design of my web page to my computer?

10 1.Create a new directory „WWW“ on the drive C 2.Open this directory 3.By the help of right mouse button create a new file – the text document „First page“ 4.Change type of the file from.txt to.html 5.Open your file – click right mouse button, choose „Open by the program …“ - Notepad 6.Write some HTML text = = source code 7.Save your file – Ctrl + S 8.Switch to browser, update the file (F5) Each changes you have to save and than update the page How create my first HTML file ?

11 1.Choose some web site on Internet 2.Click „View“ on the top 3.Choose „Source“ You can browse the source code of choosing page and could copy some parts to your page. What´s source code ?

12 - basic parts of for formating of text Tags = „marks“ HTML file = an ordinary text with tags All tags use, e.g., Html code : text other text next text What´s the tag ?

13 My first page I’m creating my first html page. There is some other text. 1. - begin of document, - end of dokument 2. … the header – it isn’t visible, it contains some important data, e.g. name of document 1. … - this part contains a visible text My first HTML page

14 HTML code contains pair tags and nonpair tags. Examples of pair tags: (tags for bold text) etc. Example of non/pair tags: - only one tag for the image, not exist - only one tag for line break, not exist etc. Pair tags

15 Backgrounds, anchors Background and anchors Some text The anchor to Google. Anchor to example2.htm Copy this example to the your file Use your favorite browser Try right function of this example Background of the page Anchor to other source

16 New tags with attributes: text of the anchor text (or image) between these tags is visible as text of the anchor. Use click to anchor you can see page with address like attribute HREF. href attribute of tag "a" = the path to anchoring file rovná cestě, we can use relative or absolute address absolute address - http://www.[sometext].[appendix], e.g. http://www.google.com relative address – for the anchor of my own file, this file have to be in the same directory (href=“example2.html) or in the near directory (href=“[name of directory/example2.htm]) - this is a way for colours of the document body style = attribute of the tag, in this case define the colour of the page background (green) and the text colour (yellow) Tags with attributes

17 1.The letters in the code can be different: is the same as 2.But addresses and names of files MUST use the right letters: “google.com” X “GOOGLE.com” 3.You cannot use unknown tags for your favorite browser. 4.Don’t use gap in the start of the tag:. 5.Two and much gaps have the same mean like the one gap. 6.End of line is the same as the gap. 7.Names of attributes give to the quotes (“…”). 8.Special marks (e.g. ©) give like &[something], e.g. &copy. 9.Fixed gap = &nbsp. 10.The note can to put between marks. Some strict rules for writing HTML code

18 Image The image put to the document by non-pair tag: Src (source) = relative, absolute Image in the format gif or jpg – for each browsers. Tag have some next attributs. Line Put the horizontal line by tag. Can use atrributes for width, align and colour. Align - for paragraphs, charts, images align to left, right, center Use tag and attribute “text-align” An example Images, lines, align

19 , to, - different levels of inscriptions, = define of the paragraphs, very uselly tag, = text between tags is bold, = italic text between tags, - tags for define some different text e.g. some text = text is red - break of the line, “soft enter” So, we can tags for working of text !!! Usefull tags in the page body

20 Where could I copy my files ? 1)To the free hosting server = the freeweb server or (e.g.) the school server Disadvantages – you have some non-usually address and you can have some reklama-banners on your sites 1)To the pay server – Do you have money ? Hosting on the server

21 www.w3schools.com Usefull websites for creating web pages


Download ppt "Websites Creating Basic Course. What´s a website ? A website (or "web site") is a collection of related web pages, images, videos or other digital assets."

Similar presentations


Ads by Google