Web Design and Publishing

Web Design and Publishing

1. Web Design Programming

   • 1. HTML
     • is a language for creating Web pages. HTML stands for HyperTextMarkupLanguage.It is not a programming language, it is a markup language. A markup language is a collection of markup tags or elements.
       • HTML is a unique language. It is a simple and text - based language. It is used for creating web page. HTML document is created in a simple Text Editor (as a notepad) A Website is a collection of webpages. Websites are unique sources of online information. These can be available on internet. Hypertext is the basic of all information available on the website. The expanded name of HTML is Hyper Text Markup Language. It is a simple web language
         • TYPES OF HTML TAGS
           • 1. Container Tag
             • It is used twice in a document. Text is written in between the two tags. These are also called pair tag or companion tag.
           • 2. Empty Tag
             • Empty tag is a single tag. It is also named as singular tag. It does nothave any companion tag. Closing or finishing tag is never used in it.
           • STRUCTURE OF HTML TAGS
             • The general structure of HTML document has two sections: Head section and Body section.
               • 1. Head
                 • The Head section contains the Title that identifies the first part of your HTML coded document.
               • 2. Body:
                 • The body section is where you do most of the works that includes text, graphics, and other HTML elements that provide control and formatting of a page like: fonts, paragraph, list and other elements. The general syntax of HTML document
               • BASIC TAGS OF HTML
                 • 1. Head Tag 2. Title Tag 3. Body Tag 4. Heading Tag 5. Paragraph Tag 6. Line Break
                   • IMAGE TAGS
                     • In HTML, images tags are defined with the <img>tag. The img tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. src stands for “source”. The value of the src attribute is the URL of the image you want to dis-play on your page. The syntax of defining an image: <imgsrc="url" />
                   • LIST & TABLE TAGS
                     • HTML supports ordered, unordered, and definition lists. 1. <ul> - An unordered list. This will list items using plain bullets. 2. <ol> - An ordered list. This will use different schemes of numbers to list your items. 3. <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
                   • LINK TAGS
                     • A webpage can contain many links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.
                   • MULTIMEDIA TAGS
                     • You can open any external image in your webpage. Similarly external sound and movie (film) etc. can also be viewed. Anchor tag is used for viewing image or movie. HREF attribute can be used in Anchor tag let us understand the method of opening an external image in a different document: <AHREF = "D:/GuruNanak .gif> "Link anchor</ A>
   • 2. PHP
     • is stands for HypertextPreprocessor (PHP) are a type of programming language whose main job is to allow the web developers to make a dynamic and vibrant content that reacts with the available databases. Generally PHPis utilized for generating applications that are web based.
   • 3. CSS
     • is stands for Cascading Style Sheets. These sheets refer to the presentation of HTML elements as a distinct file known as CSS file with an .css extension.CSS helps to change formatting of any HTML element by simply rolling out improvements at one place. All progressions made would be reflected naturally to the greater part of the pages of the website in which that component showed up.
   • 4. Bootstrap
     • – Itis a “powerful mobile first front-end framework for faster and easier web development.”It is a collection of tools to help you rapidly deploy websites and Web application on internet.
   • 5. JavaScript
     • JavaScript is a lightweight, deciphered programming dialect with object-oriented capacities that enables you to incorporate intelligence with generally static HTML pages.

2. Web Site Development & Publishing

   • Website is a place on web and is hosted on a web server. It is a set of related web pages. It is accessed using Internet address known as Uniform Resource Locator (URL).
     • 1. Static Websites
       • Static websites are also known as flat or stationary websites. They are loaded on the client’s browser as exactly they are stored on the web server. Such websites contain only static information. User can only read the information but can’t do any modification or interact with the information. Static websites are created using only HTML. Static websites are only used when the information is no more required to be modified
     • 2. Dynamic Websites
       • Dynamic websites shows different information at different point of time. It is possible to change a portion of a web page without loading the entire web page. It has been made possible using Ajax technology.
   • Website Designing
     • Web designing is linked directly to the visual part of a web site. Active web design is essential to convey thoughts adequately. Web designing is subset of web development. Anyway, these terms are utilized reciprocally. Web Design Plan ought to incorporate the accompanying:  A site map of pages.  Details about information architecture.  Planned structure of site.
       • 1. Web Designing Tools
         • Photoshop CC - Illustrator CC - Sublime Text - Imageoptim - Sketch 3 - Heroku - Axure - Hype 2 - Image Alpha - Hammer - JPEG mini Lite- Bug Herd
       • 2. Web Page Anatomy
         • 1. Containing Block 2. Logo 3. Navigation 4. Content 5. Footer 6. Whitespace
       • 3.Web development tools
         • A web development tool helps the developer to test and debug the web sites. Now a day the web development tool comes with the web browsers as add-ons. All web browsers have built in tools for this purpose. These tools allow the web developer to use HTML, CSS and JavaScript etc.. These are accessed by hovering over an item on a web page and selecting the “Inspect Element” from the context menu.
       • 4. Website Publishing
         • Website publishing is the process of uploading files or content on the internet. It includes:  Uploading files.  Updating web pages.  Posting blogs. Website is published by uploading files on the remote server which is provided by the hosting company.
           • Prerequisites for Website Publishing
             • 1. Web development software 2. Internet Connection 3. Web Server
       • 5. Website Hosting
         • Web hosting refers to a service that provides space for the storage of web pages that too online.Through World Wide Web these web pages are made accessible to the user. The organizations that offer the service of web hosting are called as Web Hosts. Theservers of the web hosting website 24*7 remain switched on.The organizations or the web hosting companies run these servers. Each and every serveris demarcated with a specific IP Address. As the IP addresses are not easy to memorizethus, so the domain name of the server is pointed to the IP address of the server by the webmaster.
           • Types of Hosting
             • Shared Hosting - Virtual Private Server VPS - Dedicated Server - Reseller Hosting - Grid Hosting