HNDIT1022 Web Design Week 1 Theory PDF

HNDIT1022 – Web Design Week 1: Introduction  Module Web Design Module Code HNDIT1022 Title Per week(hours) Credit 4 Hours/ Lectures 02...

HNDIT1022 – Web Design Week 1: Introduction  Module Web Design Module Code HNDIT1022 Title Per week(hours) Credit 4 Hours/ Lectures 02 Week Lab/Tutorial 04 GPA/NGPA GPA(Compulsory) Student Activities 07 Notional hours 13 Semester 1 (15 Weeks)  Module Aims The module focuses on the fundamentals of web internet and develop web site using HTML, CSS, JavaScript and the current developments in Web Design theory and the practice. 3  Learning Outcomes Design , development and deploy a simple website using HTML,CSS and Java Scripts Design and develop interactive visually appealing client-side programs Describe HTML5 and web design tools 4  Outline of Details Syllabus 1. Introduction to web Design 2. Understanding HTML and XHTML 3. Define and plan the information hierarchy 4. Understanding Cascading Style sheet 5. Understanding CSS Box Model and Positioning 6. Understanding dynamic web sites and introduction to photoshop 7. Understanding Java Script programming 8. Working with web-based forms 9. Introduction to Dream viewer 10. Introduction to web servers and hosting 5  Assessment Weight Type Activity Weighting Online quizzes, Labs, Individual Continuous Assignment , Group Assessmen Assignment , 40% t Tutorial End of Structured question 60% semester paper examination 6 Prescribed Textbook and Resources Sam's Teach Yourself HTML, CSS, and JavaScript All in One, Sam's Publishing; 1 edition Internet & World Wide Web, How to Programme (5th edition) Dietel&Dietel Online materials https://www.w3schools.com/ https://www.tutorialspoint.com/index.htm 7 Week 1 - Introduction to web design 8  Subtopics History of HTML and WWW. Describe the compatibility of web browsers How to select web hosting provider How to transfer files to your web server using FTP How to distribute web content and web publishing 9  Internet vs. WWW Most people use the two terms interchangeably but they are in fact different. The Internet is a vast, international network, made up of computers and the physical connections (wires, routers, etc.) allowing them to communicate. The World Wide Web (WWW or just the Web) is a collection of software that spans the Internet and enables the interlinking of hypertext documents and resources. Hyperlink (or link)- is a reference to a document that the reader can directly follow, or that is followed automatically  History of World Wide Web ▪ Tim Berners-Lee invented the World Wide Web while working at CERN in 1989, applying the concept of hyperlinking that had by then existed for some decades. ▪ He developed the first web server, the first web browser, and a document formatting protocol, called Hypertext Markup Language (HTML). ▪ After publishing the markup language in 1991, and releasing the browser source code for public use in 1993, many other web browsers were soon developed When was the first web page created ? The first webpage was discovered by Tim Berners-Lee who was researcher at CERN (the European Organization for Nuclear Research). The first webpage went live on August 6, 1991. The first webpage is used for sharing the documents through the internet by using limited simple text and FTP (File Transfer Protocol). It is convenient for the workspace and acceptable in browsers. Cont.. HTML is derived from SGML ( Standard Generalized Markup Language). The term SGML denotes that it is a markup language document and set of tags, it is based on DTD (document type definition). SGML is not a document language, but it is used to define the specific part, it is consider as a metadata. HTML is the standard markup language for Web pages. HTML stands for Hyper Text Markup Language First webpage  What is World Wide Web ? The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience 1. A uniform naming scheme for locating resources on the Web (e.g., URIs) 2. Protocols, for access to named resources over the Web (e.g., HTTP). 3. Hypertext, for easy navigation among resources (e.g., HTML).  URL Every resource available on the Web -- HTML document, image, video clip, program, etc... has an address that may be encoded by a Uniform Resource Locator, or "URL". URLs typically consist of three parts are The naming scheme of the mechanism used to access the resource(Protocol) The name of the machine hosting the resource(Domain) The name of the resource itself, given as a path 18  HTTP HTTP (Hypertext Transfer Protocol)is the set of rules for transferring files (text, graphic images, sound, video, and other multimedia files) on the World Wide Web. HTTP is a very simple client-server request/response communication protocol. Development of HTTP was coordinated by the W3C (World Wide Web Consortium) and the IETF (Internet Engineering Task Force) HTTPS URLs of websites that handle private information, such as credit card numbers, often begin with https://, the abbreviation for Hypertext Transfer Protocol Secure (HTTPS). HTTPS is the standard for transferring encrypted data on the web. Web Server-Client Diagram  W3C (World Wide Web Consortium) The Global terms and international standards of HTML was maintained by W3C (World Wide Web Consortium) and the WHATWG (Web Hypertext Application Technology Working Group). To develop the Web standards member of the organizations and the full time staff are working together for W3C. Tim Berners-Lee who was the web inventor led the W3C and the current CEO of W3C is Jeffrey Jaffe. The main motto of the W3C is to lead the World Wide Web for developing the guideline and the protocols to certify the long term growth of the Web.  Web page A document or information resource that is suitable for the World Wide Web Can be accessed through a web browser Displayed on a monitor or mobile device This information is usually in HTML or XHTML format. Use other resources such as style sheets, scripts and images into their final presentation retrieved from a local computer or from a remote web server  Web Site A collection of related web pages containing images, videos or other digital assets Hosted on at least one web server Accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator  Web Server Web server is a software on a server machine that can be run to answer requests from Web clients using the Hypertext Transfer Protocol (HTTP). This can also be defined as a network server that manages access to files, folders and other resources over the Internet or local intranet via HTTP. Web servers handle access permission, execute programs, keep track of directories and files and communicate with client computers.  Web browsers A software application for retrieving, presenting, and traversing information resources on the World Wide Web. Major web browsers are Internet Explorer, Firefox, Google Chrome, Apple Safari, and Opera.  Versions of HTML YEAR VERSION 1989 Tim Berners Lee Invented WWW 1991 Time Berners Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML working Group defined HTML2.0 1997 W3C recommendations HTML 3.2 1999 W3C recommendations HTML 4.01 2000 W3C recommendations XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommmendations:HTML5 2016 W3C Candidate Recommendation:HTML5.1  Browser Compatibility The term browser compatibility refers to the ability of a certain website to appear fully functional on different browsers that are available in the market. This means that the website’s HTML coding, as well as the scripts on that website, should be compatible to run on the browsers. This is of immense importance, especially today when there is a large variety of web browsers available.  Why Is It Important? A website’s compatibility plays a huge role in the success of an e-commerce business. The reason being that incompatibility with certain browsers limits the audience of that website. This leads to the limited traffic on that particular website which can bring down its conversion. This means that browser compatibility is among the prime aspects to cater to while a website is in the development phase.  How It Works? The difference between different browsers is that the mode of translation of the text is different in every web browser. This mode of translation is used to translate the HTML coding of a website. Although the standard of rules remains, the difference tends to occur with the interpretation of the coding. The modern browsers in the market tend to be able to easily decode most modern HTML coding far better than older browsers do. What is web hosting? A key element of all websites is that they require hosting services. This generally means they rely on a web hosting provider to give them space on a server. Types of Web hosting Shared Hosting Virtual Private Server(VPS) Dedicated Hosting Cloud Hosting WordPress Hosting Managed Hosting Reseller Hosting How to select a web hosting provider Choosing the hosting company and plan that are right for your site can take some careful consideration. Not all hosts are created equal, and you’ll want to make sure you’re getting all the features you’ll need. Cont.. Know What Your Website's Needs Are. Confirm the Subscription Period for Hosting Contracts. Check for Server Reliability and Uptime Guarantees. Confirm the Host's Refund Policy and Guarantees. Understand What Your Upgrade Options Are. Verify the Host's Primary Features and etc..  Hosting Services The best web hosting services will give you plenty of options when it comes to plans and features. That way, you have flexibility when it comes to getting the resources you need for growing your website. So which web hosting options are best for you? If this is your first time building a website, shared hosting is usually a safe , and you can only move upwards from there. On the other hand, if you’re a more experienced user and need full control over your configuration, a VPS can be a more fitting option.  What Is FTP(File Transfer Protocol)? FTP (File Transfer Protocol) is a network protocol for transmitting files between computers over Transmission Control Protocol/Internet Protocol (TCP/IP) connections. Why is FTP important? FTP is a standard network protocol that can enable expansive file transfer capabilities across IP networks. Without FTP, file and data transfer can be managed with other mechanisms such as email or an HTTP web service But those other options lack the clarity of focus, precision and control that FTP enables. How does FTP work? FTP is a client-server protocol that relies on two communications channels between the client and server One computer acts as the server to store information and the other acts as the client to send or request files from the server. The FTP protocol typically uses port 21 as its main means of communication. An FTP server will listen for client connections on port 21. Using FTP, a client can upload, download, delete, rename, move and copy files on a server. How to transfer files to your web server using FTP Understand the parts of an FTP address : When you come across FTP addresses on a webpage, they are usually denoted in the same way as a usual webpage address Determine how you prefer to connect: There are three main ways to connect to FTP servers: via visual clients, via browser-based clients, or through the command line. Downloading and installing a visual client is the most widely used and easiest way to connect to an FTP, and also affords you the most power and control over the process. Cont.. Examples of Visual clients : FileZilla Cyberduck FireFTP Classic FTP WinSCP Free FTP by CoffeeCup  Cont.. Let’s use the FileZilla FileZilla is a free, downloadable FTP client. Type in the address of the server you wish to access, the port, and the password for accessing the server. Once access has been granted, the user's files on their local system as well as the accessed server will be visible. The user can download files from the server to the local system, or upload files from the local system to the server. They can also make changes to files on the server, as long as they have the proper authorization to do so.  Content distribution in website Content distribution is the process of promoting your content to your audience in a variety of formats across multiple channels and media platforms. Content distribution falls into three categories: owned, earned, and paid distribution. Why is it Important to Distribute Your Content? Content distribution is an essential part of any digital marketing strategy Distributing your content properly can lead to more social shares, drive traffic to your website, and create more conversations across your social networks.  How to distribute web content? Content distribution channels are the online places where you can share and promote the content you’ve created. Nowadays, content can be shared in many different ways, from blogs and social media networks to emails and e-books. Also, you can distribute content yourself or through another content publisher, or use a paid content-sharing platform. With so many options available, it can be difficult to know which methods best suit your needs and purposes.  Cont.. However, some content promotion tactics are generally more effective than others. Here are a few that can help you reach a larger audience and boost your website traffic. Leverage Influencers Use Social Media Convert Your Content into Different Media Promote Your Content on Content Communities  Cont.. Some examples of Content Types to Add to Your Website Blog posts Video Infographics Case Studies Ebooks Webinars Podcasts  Web publishing Web publishing is the process of publishing original content on the Internet. The process includes building and uploading websites, updating the associated webpages, and posting content to these webpages online. Web publishing comprises of personal, business, and community websites in addition to e-books and blogs. Publishers must possess a web server, a web publishing software, and an Internet connection to carry out web publishing  What are the options available to publish the website? Publishing a website is a complex topic because there are many ways to go about it. Such as Getting hosting and a domain name Using an online tool like GitHub or Google App Engine Using a web-based IDE such as CodePen Questions…? 49