Download to read offline
More Related Content
Similar to Lab1-FrontEndTraining For everybody..pdf
![SHS_Core_CAE_Q3_LE1 FOR THIRD [FINAL].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/shscorecaeq3le1final-251116055110-e3081055-thumbnail.jpg?width=640&height=640&fit=bounds)
Lab1-FrontEndTraining For everybody..pdf
- 1. WWW, HTTP, Cookies EsraaM. Elhariri Lecturer CS Department Abdullah Emam Lecturer Assistant
- 2. HTML basics,what's involved in writing it and understanding the basic elements of a webpage. Cascading Style Sheets (CSS) and how they control the presentation of HTML. Javascript and its role in user interaction, how it integrates and why it matters. PHP will be discussed in very general terms with an eye toward use of dynamic pages and Content Management Systems.
- 3. Before beginning thislesson, the student must be able to… ▪ Access web pages and navigate the web ▪ Use search engines to locate specific information ▪ Download graphics from web pages
- 4. After completingthis lesson, the student will be able to… ▪ View the source of any web page ▪ Name and explain the uses of basic HTML tags: <HTML></HTML><HEAD></HEAD><TITLE></TITLE> <BODY></BODY><B></B><I></I><HR><BR><IMG...> <P></P><UL></LI></UL>, links (awareness), header sizes ▪ Gather text and graphic information about a topic ▪ Create a simple web page using a word processing program or a text editor ▪ Display the web page using a browser
- 5. You willbe exposed to a lot of new information in this lesson. The actual purpose is to help you begin to recognize the structure of HTML.
- 6. WWW andthe HTTP protocol ▪ The HTTP protocol ▪ The request-response model Cookies Web Development Tools
- 7. HTTP Protocol: theHeart of the WWW
- 8. The Internetis an increasingly important part of everyday life for people around the world. We Can do ….
- 9. A computernetwork is a group of computer systems and other computing hardware devices that are linked together through communication channels to facilitate communication and resource-sharing among a wide range of users.
- 10. The Internetis a network of networks. With the Internet, it's possible to access almost any information, communicate with anyone else in the world, and do much more.
- 11. How does yourcomputer connect to the Internet ?
- 12. WWW =World Wide Web = Web ▪ Global distributed information system in Internet ▪ Consists of set of documents (and other resources) located on different Internet servers ▪ Accessed through standard protocols like HTTP, HTTPS and FTP by their URL ▪ Web servers provide Web content ▪ Web browsers display the Web content 12
- 14. In 1989,Timothy Berners-Lee and other researchers at the CERN nuclear research facility, laid the foundation of the World Wide Web, or the Web. They created an information system that would make it easy for researchers to locate and share data required minimal training and support 14
- 15. ▪ They developeda system of hypertext documents, electronic files that contain elements that you can easily select 15
- 16. 16 This figure showshow topics can be related in a hypertext fashion, as opposed to a linear fashion.
- 17. 17 The keyto hypertext is the use of links, which you activate to move from one topic to another. ▪ a link can open a document on a computer anywhere in the world Hypertext has become the dominate method of sharing and retrieving information on the Internet, becoming known as the World Wide Web, or the Web. Documents on the Web are known as Web pages.
- 18. Structural components ▪Internet – provides data transfer channels over the TCP and HTTP protocols ▪ Clients (Web browsers) – display Web content ▪ Web servers – IIS, Apache etc. Semantic components ▪ Hyper Text Transfer Protocol (HTTP) ▪ Hyper Text Markup Language (HTML) ▪ Uniform Resource Locator (URL) ▪ Uniform Resource Identifiers (URIs) 18
- 19. Each document/resourceon the WWW needs to have an identifier in order to be accessed by others. A Uniform Resource Identifier (URI), is a compact string of characters used to identify or name a resource. A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource by describing its network “location”.
- 20. Clients useWeb browser application to request resources from the Web servers via HTTP ▪ Resources have unique URL address Servers send the requested resource as a response ▪ Or reply with an error message Web pages are resources in WWW ▪ HTML text, graphics, animations and other files Web sites ▪ Web sites are sets of Web pages in WWW 20
- 21. Client’s browserrenders Web pages returned by the Web servers ▪ Pages are in HTML (Hyper Text Markup Language) ▪ Browsers shows the text, graphics, sounds, etc. ▪ HTML pages contain hyperlinks to other pages The entire WWW system runs over standard networking protocols ▪ DNS, HTTP, FTP, … The HTTP protocol is fundamental for WWW 21
- 22. Uniform ResourceLocator (URL) ▪ Unique resource location in WWW, e.g. It is just a formatted string, consisting of: ▪ Protocol for communicating with the server (e.g., http, ftp, https, ...) ▪ Name of the server or IP address ▪ Path and name of the resource (e.g. index.php) ▪ Parameters (optional, e.g. ?id=27&lang=en) 22 http://www.telerik.com/academy/winter-2009-2010.aspx
- 23. Hyper TextMarkup Language (HTML) ▪ Notation for describing formatted text with images and hyperlinks ▪ Interpreted and displayed by the Web browsers A Web (HTML) page consists of: ▪ HTML file ▪ CSS stylesheet file (optional) ▪ A bunch of images (optional) ▪ Other resources (optional) 23
- 24. HTML isstraight-forward and easy to learn ▪ HTML documents are plain text files ▪ Easy to add formatting, hyperlinks, bullets, etc. ▪ Images can be added as separate files ▪ Can be automatically generated by authoring programs ▪ Tools to help users creating HTML pages ▪ E.g. FrontPage, Dreamweaver, Visual Studio ▪ WYSIWYG HTML editors 24
- 25. 25 <html> <head><title>HTML Example</title></head> <body> <h1>Heading 1</h1> <h2>Subheading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div align="center" style="background:skyblue"> This is a div</div> </body> </html>
- 26. Hyper TextTransfer Protocol (HTTP) ▪ Client-server protocol for transferring Web resources (HTML files, images, styles, etc.) Important properties of HTTP ▪ Request-response model ▪ Text-based format ▪ Relies on a unique resource URLs ▪ Provides resource metadata (e.g. encoding) ▪ Stateless (cookies can overcome this) 26
- 28.
- 29. Client program ▪Running on end host ▪ E.g. Web browser ▪ Requests a resource Server program ▪ Running at the server ▪ E.g. Web server ▪ Provides resources GET /index.html HTTP/1.0 HTTP/1.0 200 OK "Welcome to our Web site!" 29
- 33. 1. Information Gathering 2.Planning 3. Design 4. Development 5. Testing and Delivery 6. Maintenance
- 34. 1. what isthe purpose of the site? (AIMS) This site is meant to be informative. The site will be used to sell a product. The site will be used to recruit new members to our organization. The main purpose of the site is educational. 2. who is the site for (audience) Students at a university, Expert Internet users, Patients
- 38. In building awebpage, think of HTML, CSS, and JavaScript as different parts of a car. HTML is like the car's skeleton, forming the basic structure and frame. CSS adds the paint and finishing touches, making the car look appealing with color, style, and design. JavaScript is similar to the engine and mechanical parts, infusing the car with functionality, movement, and interactive features.
- 39. Frontend refersto the visible part of a website or app that users interact with, like the tables, images, and buttons. It's built using languages like HTML, CSS, and JavaScript. The backend, on the other hand, handles behind-the-scenes operations like storing and processing data when users interact with the frontend. It uses languages like Python, Ruby, and Java. In essence, frontend is what users see, while backend
- 40. The webbrowser retrieves the content from web servers, where it is stored in the form of HTML documents. An HTML document is created by writing code with specific tags in a code editor of your choice. The document is then saved with the '.html' or '.htm' extension. Once saved, the browser interprets the HTML document, reads it, and renders the web page.
- 41. • Web Browser(client)requests websites like www.facebook.com from the web server. • Web server in return sends HTML, CSS, and JavaScript files to it. • HTML, CSS, and JavaScript files are parsed by a web browser which is responsible for showing you a beautiful website.
- 42. Web pagesare text files containing HTML HTML – Hyper Text Markup Language ▪ A notation for describing ▪ document structure (semantic markup) ▪ formatting (presentation markup) ▪ Looks (looked?) like: ▪ A Microsoft Word document The markup tags provide information about the page content structure 48
- 43. 1) HTMLEditor: It's a straightforward tool where every piece of HTML content must be written. You can use any text editor of your choice. In this tutorial, we're using Visual Studio Code because it's lightweight and open-source. Popular editors for HTML development include text editors like PhpStorm Notepad++ and TextEdit, code editors such as Sublime Text and Visual Studio Code, and full-fledged IDEs like WebStorm and Eclipse. Online platforms like CodePen and JSFiddle are also commonly used for quick HTML editing and testing. 2) Browser: HTML tags are not displayed by browsers; instead, they are read and interpreted to render the web page. In a web browser, HTML structures are displayed in a styled and visually appealing form. In this tutorial, we are using Google Chrome. Other commonly used browsers include Chromium, Firefox, Safari on Mac, and Microsoft Edge.
- 44. •Search for "Visual Studio Codedownload" on Google •Download Visua l Studio Code for your Operating System. I am using Windows so I will install it for Windows
- 45. In addition, we'll beinstalling the Live Server extension in our Visual Studio Code editor to view live reload pages. The Live Server extension is used to launch a local development server with a live reload feature for HTML pages.
- 46. Another usefulextension for working with HTML in VS Code is 'HTML Preview.' To install it, simply click on the extensions icon in VS Code and type 'HTML Preview' in the search bar. Install it!
- 47. Now, youwill see a button within VS Code. Clicking on this button will allow you to preview your HTML right within the editor.
- 48. Once youclick the button, you'll see a live preview of your HTML directly within VS Code. You don't even need a browser to render plain HTML. This live preview feature in VS Code is perfect for this HTML, allowing you to build and preview your entire HTML website without ever leaving the editor.