Introduction to web page
Download as PPTX, PDF0 likes2,997 views
This document discusses HTML (Hypertext Markup Language) and how it is used to create websites. It defines HTML and explains how it uses tags to structure and markup web pages. It also defines browsers and lists some major browsers like Internet Explorer, Firefox, Chrome, and Safari, providing their advantages and disadvantages. Finally, it discusses how to open and edit web pages using an HTML editor like Netscape Navigator.
![The Netscape Navigator
web browser is the general name for a
series of web browsers formerly
produced by Netscape
Communications Corporation, a former
subsidiary of AOL. The original browser
was once the dominant browser in
terms of usage share, but as a result of
the first browser war, it lost virtually all
of its share to Internet Explorer.[1]](https://image.slidesharecdn.com/introductiontowebpage-201009050039/85/Introduction-to-web-page-30-320.jpg)
Introduction to web page
- 2. By / Mahmoud Shaqria شقريهمحمد محمود
- 3. 1. Define HTML (HYPERTEXT MARKUP LANGUAGE ) AND how it is used for websites 2. Explain how is HTML is used in websites explain hat e mean by browser 3. Explain what we mean by browsers term 4. List and describe the main browsers including (advantage & disadvantage ) 5. Discuss the structure of web pages and ho to open them through browsers 6. Describe hat is HTML editor ( Netscape navigator ) and how to use it through web pages
- 4. • Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. Introduction • HTML is a Language, as it has code-words and syntax like any other language.
- 5. HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organisation charged with designing and maintaining the language.
- 6. • HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in. (Hypertext Markup Language )
- 7. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).
- 9. HTML consists of a series of short codes typed into a text- file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages. How HTML is used in webpage
- 10. The program you use to view webpages. You’re more than likely reading this through one right now. They translate, or interpret HTML code into the page you see. The most common are Microsoft Internet Explorer (IE), and Netscape Navigator (NN). There are also text-only browsers, used for speedy information gathering. Definition of browser
- 12. Internet Explorer • Most people started out using Internet Explorer the majority of the time when it comes to browsing the internet, checking emails, listening to music online, shopping online, and etc. This was the first web browser consumers used in technology world before other web browsers came out. For more information check out Internet Explorer.
- 13. • Free to download at no cost • Offers every help option we looked for, including direct support via email and telephone • Provides speed and functionality • Easy to use • Mostly used throughout the world
- 14. • Bugs come in IE (Internet Explorer) users at different times and fixing them is time consuming • Microsoft is unaware of finding any bugs hidden within the browser to fixes • Installation on software such as Adobe Flash Player can be slow and has to be done manually sometimes when it comes to updates that need to be install • Lack of security in ActiveX controls • Lack of built in features to synchronize bookmarks • Confusion between 32 and 64 bit versions for IE • Lack of cross-platform experience (ie. used in Windows but not Mac) • Huge target for hackers and cyber-thieves
- 15. Safari is web browser that was produced and developed by Apple Inc. which functions on a Mac OX, iOS, and Windows operating system. It was first put out in public on January 7, 2003 by Apple Inc. It was Apple’s default browser known as “Panther” for Mac users and released on June 11, 2007 on Microsoft Windows operating system. Safari
- 16. • Provides all of security features • Cleans up unnecessary junk • Great for Mac users and free to download • Speed compatibility • Extremely Fast to download for Mac users • Add extensions from Safari Extensions • Ease of Use • Page-load times impressive
- 17. • Provides all of security features • Cleans up unnecessary junk • Great for Mac users and free to download • Speed compatibility • Extremely Fast to download for Mac users • Add extensions from Safari Extensions
- 18. Google Chrome e Advantage • Fast browsing performance • More control over your tabsMore dynamic home page for common used search engines and bookmarks • Built-in Flash and PDF Support • More speed and won’t slow down on your browsing through internet • Has sync capabilities that allow you to access your customized browser from any computer • Makes searching so much simpl erEase of use • Great security • Free to download at no cost
- 19. • Lack of parental controls • Minor site incompatibilities • Graphics hardware acceleration doesn’t work with all graphics cards Disadvantage
- 20. Firefox was introduced to new comers who were used to browsing through Internet Explorer in the early 90s. Majority of people may stick to this brand since it most popular browsers amongst its competitors based on its features and may allow secure downloads on applications and programs. Firefox
- 21. • More secure privacy mode and downloading • More intuitive navigation • Contains minimalist interface • Offers lot of help and support on Firefox tutorial • Ease of use • More Customization • Speed and more compatible • Easy to have add-ons • Free to download at no cost Advantage
- 22. • No thumbnail previews or mouse gestures however there are free plug-ins from Firefox Mozilla that address both these issues • Resource heavy “uses a heavy portion of memory to run” Disadvantage
- 23. • A web page could be considered as a document tree that can contain any number of branches. • If we look at this comparison, we can see that the html element in fact contains two elements : head and body . head has two subbranches—a metaelement and a title. The bodyelement contains a number of headings, paragraphs, and ablock quote.
- 24. • The head element contains metadata—information that describes the document itself, or associates it with related resources, such as scripts and style sheets. • The title element, which represents the document’s title or name—essentially, it identifies what this document is. The content inside the title may be used to provide a heading that appears in the browser’s title bar, and when the user saves the page as a favorite. It’s also a very important piece of information in terms of providing a meaningful summary of the page for the search engines, which display the title content in the search results.
- 25. In addition to the title element, the head may also contain: 1. Base: defines base URLs for links or resources on the page, and target windows in which to open linked content 1. link refers to are source of some kind, most often to a style sheet that provides instructions about how to style the various elements on the webpage 1. Style provides an area for defining embedded (page-specific) CSS styles
- 26. 1. Script used either to embed or refer to an external script 1. Object represents a generic, multipurpose container for a media object
- 27. Body This is where the bulk of the page is contained. Everything that you can see in the browser window (or viewport) is contained inside this element, including paragraphs, lists, links, images, tables, and more. The body element has some unique attributes of its own, all of which are now deprecated, but aside from that, there’s little to say about this element. How the page looks will depend entirely upon the content that you decide to fill it with; refer to the alphabetical listing of all HTML elements to
- 29. An HTML editor is a specialized piece of software that assists in the creation of HTML code. Similar to text editors such as Notepad and TextEdit, HTML editors allow users to enter raw text. Most (if not all) professional web developers use an HTML editor to create and maintain their websites. This is because a good HTML editor can boost productivity enormously.
- 30. The Netscape Navigator web browser is the general name for a series of web browsers formerly produced by Netscape Communications Corporation, a former subsidiary of AOL. The original browser was once the dominant browser in terms of usage share, but as a result of the first browser war, it lost virtually all of its share to Internet Explorer.[1]
- 31. Open your Netscape browser. open the folder with your template files. Drag any one of the HTML pages into the Netscape browser (or you can choose "File" then "Open File" instead). Now choose "File" then choose "Edit Page". You can do your edits right there. You can edit in either "View" then "HTML Source" or in "Normal Edit Mode". Save the file and refresh the browser to see your updates. Be sure to backup your files and to check each edit in Netscape, Firefox and IE before you proceed to the next edit. How it is used
- 32. Different type of hyperlink 1- Relative Links A relative link points to a location that is relative to the current page. Having a link to “index.html” is a relative link that points to the “index.html” page in the same directory as the current page. Links can also be made to “../index.html” to go to “index.html” in the parent directory. You can also use links like “../images/mypic.jpg” to find an image in the images directory inside the parent directory of the current page.
- 33. 2- Site Root-Relative Links A site root-relative link points to a location that is relative to the root directory of the site. They begin with a slash “/”. Having a link to “/index.html” is a site root-relative link that points to the “index.html” page in the root directory of the site. One common use of this is to have all images in an images directory and then to link to images with links like “/images/mypic.jpg”.
- 34. 3- Absolute Links An absolute link is simply one that includes the entire path to the file like “http://www.contoso.com/news/index.html” . These are generally used for links that need to point to a different site than the one on which your page is located.