HyperText Markup Language (HTML) - Part 1

CSC 330 E-CommerceTeacher Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information TechnologyT2-Lecture-1HyperText Markup Language (HTML)Part - IFor Lecture Material/Slides Thanks to: www.w3schools.comSynopsis Introduction to HTMLHTML ElementsHTML EditorsHTML BasicsHTML AttributesHTML HeadingsHTML ParagraphsHTML Text FormattingHTML CommentsHTML Hyperlinks (Links)3T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comWhat is HTML?HTML stands for Hyper Text Markup LanguageHTML is a markup languageA markup language is a set of markup tagsThe tags describe document contentHTML documents contain HTML tags and plain textHTML documents are also called web pages4T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML TagsHTML markup tags are usually called HTML tags.HTML tags are keywords (tag names) surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tagThe end tag is written like the start tag, with a slash before the tag nameStart and end tags are also called opening tags and closing tags content5T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML ElementsHTML ElementsIn HTML, most elements are written with a start tag (e.g. ) and an end tag (e.g. ), with the content in between: This is a paragraph.7T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML ElementsHTML documents are defined by HTML elements.An HTML element starts with a start tag / opening tagAn HTML element ends with an end tag / closing tagThe element content is everything between the start and the end tagSome HTML elements have empty contentEmpty elements are started with start tagMost HTML elements can have attributes8T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Document Example9T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Example ExplainedThe element:This is my first paragraph.The element defines a paragraph in the HTML document.The element has a start tag and an end tag .The element content is: This is my first paragraph.10T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Example ExplainedThe element:This is my first paragraph.The element defines the body of the HTML document.The element has a start tag and an end tag .The body element content is another HTML element (a p element).11T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Example ExplainedThe element:This is my first paragraph.The element defines the whole HTML document.The element has a start tag and an end tag .The element content is another HTML element (the body element).12T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Example ExplainedDon't Forget the End TagSome HTML elements might display correctly even if you forget the end tag: This is a paragraphThis is a paragraph The example above works in most browsers, because the closing tag is considered optional.Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag.13T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comEmpty HTML ElementsHTML elements with no content are called empty elements. is an empty element without a closing tag (the tag defines a line break).Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like , is the proper way of closing empty elements in XHTML (and XML).14T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Tip: Use Lowercase TagsHTML tags are not case sensitive: means the same as . Many web sites use uppercase HTML tags.Recommendations are use lowercase15T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comWeb BrowsersThe purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user.16T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Page Structure17T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comThe DeclarationThe declaration helps the browser to display a web page correctly.There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML version and type used.18T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Versions19T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comWrite HTML Using Notepad or TextEditHTML can be edited by using a professional HTML editor like:Adobe DreamweaverMicrosoft Expression WebCoffeeCup HTML EditorNotepad (PC) or TextEdit (Mac) are recommended to use at least once for gaining understanding.20T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comSteps to Create Your First Web PageStep 1: Start NotepadTo start Notepad go to:Start    All Programs        Accessories            Notepad21T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comSteps to Create Your First Web PageStep 2: Add HTML CodeType your HTML code into your Notepad:22T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comSteps to Create Your First Web PageStep 3: Save HTML PageSelect File -> Save as.. in Notepad's menu.while saving an HTML file, use: either .htm or .html file extension. 23T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comSteps to Create Your First Web PageStep 4: View HTML Page in Your BrowserStart your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.The result should look much like this:24T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Tip - How to View HTML SourceWhen you see a Web page and wondered “How did they do that ? ““right-click” in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. That will open a window containing the HTML code of the page.25T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML BasicsHTML ParagraphsHTML documents are divided into paragraphs.Paragraphs are defined with the tag.Examples: This is a paragraphThis is another paragraphBrowsers automatically add an empty line before and after a paragraph.Don't Forget the End TagMost browsers will display HTML correctly even if you forget the end tag:ExampleThis is a paragraphThis is another paragraphIt might work in most browsers, but forgetting the end tag can produce unexpected results or errors. Future version of HTML will not allow to skip end tags.27T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML HeadingsHTML headings are defined with the to tags.Example Ahmed Mumtaz Mustehsan  Teacher  CSC 330 E Commerce 28T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHeadings Are ImportantUse HTML headings for headings only. Don't use headings to make text BIG or bold.Search engines use headings to index the structure and content of your web pages.Since users may skim your pages by its headings, it is important to use headings to show the document structure.H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.29T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML HeadingsHeadings are defined with the to tags. defines the most important heading. defines the least important heading.ExampleThis is a headingThis is a headingThis is a headingdemo !!Note: Browsers automatically add some empty space (a margin) before and after each heading.30T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML AttributesAttributes provide additional information about HTML elements.HTML elements can have attributesAttributes provide additional information about an elementAttributes are always specified in the start tagAttributes come in name/value pairs like: name="value"ExampleHTML links are defined with the tag. The link address is specified in the href attribute: comsats website 31T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comAlways Quote Attribute ValuesAttribute values should always be enclosed in quotes.Double quotes are most commonly used, but single style quotes are also allowed.Note: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name=‘COMSATS Institute of Information Technology “CIIT" '32T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comUse Lowercase AttributesAttribute names and attribute values are case-insensitive.However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.Newer versions of (X)HTML will demand lowercase attributes.33T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML LinksHTML links are defined with the tag.Example university website Note: The link address is specified in the href attribute.demo !!34T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML ImagesHTML ImagesHTML images are defined with the tag. Images can be inserted in to HTML documents.How to insert images into an HTML document ?How to insert an image from another folder or another server?Answer:Use image tag (img> along with source tag.36T1-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comThe Tag and the Src AttributeIn HTML, images are defined with the tag.If tag is empty, i.e. no closing tag, means it contains attributes only.To display an image on a page, we need to use the src attribute. The value of the src attribute is the URL of the image we want to display.Syntax for defining an image:The URL points to the location where the image is stored. An image named “monogram.gif", located in the "images" directory of “www.vcomsats.edu.pk " has the URL: browser displays the image where the tag occurs in the document. If we put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.37T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comThe Alt AttributeThe required alt attribute specifies an alternate text for an image, if the image cannot be displayed or if a user for some reason cannot view it:because of slow connection, an error in the src attribute, or if the user uses a screen reader.The value of the alt attribute is an author-defined text:The alt attribute provides alternative information for an image38T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comSet Height and Width of an ImageThe height and width attributes are used to specify the height and width of an image.Note: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. With the result the page layout will change during loading.The attribute values are specified in pixels by default:39T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML ImagesExampleRaining DayIts raining Cats and Dogsdemo !!40T1-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comUseful TipsNote:If an HTML file contains ten images - eleven files are required to display the page. Loading images takes time. So !!!Use images carefully.When a web page is loaded, the browser, gets the image from a web server and inserts it into the page. Therefore, make sure that the images are available in the same location in relation to the web page, otherwise the visitors will get a broken link icon. The broken link icon shows that “image not found”41T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Image Tags42T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML LinesThe tag creates a horizontal line in an HTML page.The hr element can be used to separate content:ExampleThis is a paragraph.This is a paragraph.This is a paragraph.43T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Line BreaksUse the tag creates a new line without starting a new paragraph:ExampleThis is a para graph with line breaksNote: The element is an empty HTML element. It has no end tag.44T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Output We cannot be sure how HTML will display our web page; Large or small screens, and resized windows will create different results.With HTML, we cannot change the output by adding extra spaces or extra lines in your HTML code.The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.Solution ?Use Formatting tags45T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Formatting TagsHTML Text Formatting TagsHTML uses tags like and for formatting output, like bold or italic text are called HTML formatting tags . or defines bold or italic text only. or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, the browsers of future might change their options to represent strong and emphasizes text. Example demo!!!This text is boldThis text is italicThis is computer outputThis is subscript and superscript47T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Text Formatting Tags48T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML CommentsHTML Comment TagsComment tags are used to insert comments in HTML.You can add comments to your HTML source by using the following syntax:Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.Comments are not displayed by the browser, but they can help document your HTML.With comments you can place notifications and reminders in your HTML:ExampleThis is a paragraph.50T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Comment TagsComments are also useful for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:Example-->Conditional CommentsYou might stumble upon conditional comments in HTML:    .... some HTML here ....Conditional comments defines HTML tags to be executed by IE only. 51T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML LinksHTML Hyperlinks (Links)Links are found in nearly all Web pages. Links allow users to click their way from page to page.The HTML tag defines a hyperlink.A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.When we move the cursor over a link in a Web page, the arrow will turn into a little hand.The most important attribute of the element is the href attribute, which indicates the link's destination.By default, links will appear in all browsers as:An unvisited link is underlined and blueA visited link is underlined and purpleAn active link is underlined and redThe HTML code for a link is simple: Link textThe href attribute specifies the destination of a link.53T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comHTML Links - The target AttributeThe target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window or a new tab:ExampleVisit W3Schools!54T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.comThe End HPML Part-IThank You