Lecture 01-HTML.pdf

Web Design & Development ADAM ADAM-23.1 FT 23.2 PT FT 1 Networks, Internet and the Web Internet has changed our lives Introduction to the Internet & Web What is Internet? It is the largest network in the world tha...

Web Design & Development ADAM ADAM-23.1 FT 23.2 PT FT 1 Networks, Internet and the Web Internet has changed our lives Introduction to the Internet & Web What is Internet? It is the largest network in the world that connects millions of individual networks all over the world Rather than moving through geographical space, it moves your ideas and information through cyberspace 380 Websites Per Minute 6  Uses of Internet Communication Information Retrieval Social Networking Education Entertainment Work and Productivity Hobbies and Special Interests 7  Difference Between Website and Webpage The Web (World Wide Web) consists of information organized into web pages containing text and graphic images It contains hypertext links, or highlighted keywords and images that lead to related information A collection of linked Web pages that has a common theme or focus is called a web site The main page in a website is known as the site’s home page / index page The basic difference between a web page and a website is that a web page is a text document written in HTML (Hyper Text Markup Language) and is rendered by a web browser, whereas a website is a collection of related webpages having a specific address, called URL, on the Internet. 8 9 10 11 Hypertext Markup Language (HTML) 12  What is HTML? HTML (Hypertext Markup Language) HTML is the set of "markup" symbols or codes inserted in a file intended for display on a World Wide Web browser. The markup tells the Web browser how to display a Web page's text, images, sound and video files for the user. The individual markup codes are referred to as elements. Eg: , , 13  HTML Documents HTML documents are text documents HTML file extensions:.html or.htm You can create html documents using: Notepad in Windows and TextEdit (MAC OS) HTML Editors 14 HTML Tag / Element / Attribute 15 HTML Attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ ---- ---- 16 17 HTML Basic Tags The basic structure for all HTML documents is simple and should include the following minimum elements or tags; - The main container for HTML pages - The container for page header information - The title of the page - The main body of the page 18 HTML Document Structure The HTML document is divided into two major parts: HEAD: Contains information about the document: Title of the page Meta tags: used to describe the content JavaScript and style sheets links BODY: Contains the actual content of the document This is the part that will be displayed in the browser window 19  The Element HTML Basic tags 20 Sample HTML Document My First Web Page Hi all! We are going to learn HTML today 21 Paragraph The tag defines a paragraph This is some text in a paragraph. 22 Tags without end tag ▪ Most (but not all!) HTML tags have a start tag and an end tag: Hello, world! ▪ Tags without end tag: - Break Rule - Creates a Horizontal Rule - Insert Image - Insert meta data to a webpage - Define document type 23 Information which the browser will ignore: Tabs, Multiple spaces and new lines will appear as a single space Example: “Hello, How are you?” The browser will ignore the blanks and new line: Hello, How are you? 24 Line Break 25 Headings: to You can create Headlines of various sizes on your page Headlines appear as bold letters Use for titles h1 is the largest font and h6 is the smallest heading Ex: This is Heading 26  THIS IS HEADING 1 THIS IS HEADING 2 THIS IS HEADING 3 THIS IS HEADING 4 THIS IS HEADING 5 THIS IS HEADING 6 27  Text formatting tags Bold: sample text or The text in between the tags will be bold Italic: sample text or Italics displays the text at a slight angle Underline: sample text Underline the text Strike-out: sample text Puts a line right through the centre of the text Centre: sample text Makes everything in between the tags centered (in the middle of the page) 28 Insert an Image tag defines an image in an HTML page. Example: