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.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Introduction to HTML
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
HTML. The World Wide Web Protocols Addresses HTML.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
WeB application development
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
How To Create A Web Page By: Mikeon Briddy & Darrius Jacobs April 10,2006 Mr. Barnett.
INTRO TO THE WWW. What is the World Wide Web? The World Wide Web (WWW) is most often called the Web. The World Wide Web (WWW) is most often called the.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating Web Pages Getting Started. Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Marking Up With Html: A Hypertext Markup Language Primer
HTML Introduction HTML
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web Web.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
1 Essential HTML coding By Fadi Safieddine (Week 2)
Understanding HTML Code
Images in HTML PowerPoint How images are used in HTML.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
Just Enough HTML How to Create Basic HTML Documents.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
1 John Magee 9 November 2012 CS120 Lecture 17: The World Wide Web and HTML Web Publishing.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
HTML Hyper Text Markup Language 1BFCET BATHINDA. Definitions Web server: a system on the internet containing one or more web site Web site: a collection.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
HTML – The Basics COE 201- Computer Proficiency. The Internet The World Wide Web ▫Also known as the Web ▫Created in 1989  European Laboratory for Particle.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.
HTML HyperText Markup Language Victoria E. Kozlek.
HTML – The Basics Rebecca Shillingburg
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Basic Web Publishing M. Scott Gartner 7/15/98.
Computer Basics Introduction CIS 109 Columbia College.
Online PD Basic HTML The Magic Of Web Pages
Introduction to HTML.
Uppingham Community College
HTML.
Presentation transcript:

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 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 :

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

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

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 ?

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

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

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 ?

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?

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 ?

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 ?

- 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 ?

My first page I’m creating my first html page. There is some other text 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

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

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

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 - e.g. 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

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

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

, 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

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

Usefull websites for creating web pages