Introduction to Web - Lecture Notes PDF

Introduction to web 2- Introduction to HTML Dr. Heba Mamdouh Minia university Faculty of science Computer science department  What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text M...

Introduction to web 2- Introduction to HTML Dr. Heba Mamdouh Minia university Faculty of science Computer science department  What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language. HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags. The tags give the browser instructions on how to display the content. the tags themselves don’t display. HTML language isn’t case sensitive, and doesn’t affect by spaces and line breaks. Using HTML, you can create a Web page with text, graphics, sound, and video HTML Versions  HTML Editors Professional HTML editors: Adobe Dreamweaver CoffeeCup HTML Editor For the simple examples in this course we only need Notepad (Windows) Create the HTML Code in Notepad and save the File as.htm. To open the File in a Web Browser, just double-click on the file.  Web Browsers The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document.  HTML Tags HTML tags are element names surrounded by angle brackets: content goes here... HTML tags normally come in pairs like and. The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name.  HTML Tags No Tag & Description 1 This tag defines the document type and HTML version. 2 is the root element of an HTML page This tag encloses the complete HTML document and mainly comprises of document header which is represented by... and document body which is represented by... tags. 3 contains meta information about the document This tag represents the document's header which can keep other HTML tags like , etc. 4 The tag is used inside the tag to mention the document title 5 contains the visible page content. This tag represents the document's body which keeps other HTML tags like , , etc. 6 This tag represents the heading. 7 This tag represents a paragraph.  HTML Elements An HTML element usually consists of a start tag and end tag, with the content inserted in between: My first paragraph. HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the element (which indicates a line break). HTML elements can be nested (elements contain elements): sample text HTML nested elements, should be properly nested. HTML tags are not case sensitive: means the same as.  HTML Elements HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document. Start Tag Content End Tag This is paragraph content. This is heading content. This is division content.  HTML Attributes HTML Elements can have attributes. Attributes provide additional information about HTML elements. Attributes usually come in name/value pairs like: name="value“ Example: a title attribute is added to the element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph: