Web Publishing notes

What is web page?

A web page is a document (containing text, graphics, links, etc.) described in a text file that can be displayed by a web browser. A web page has no fixed width or length like a paper page. The information and formatting of the web page is stored in text file that contains the text of the page and HTML (HyperText Markup Language) codes (called tags) that determine the layout of the page in the web browser. The HTML tags come in pairs (at least most of them ... some do not have an ending tag) that indicate the beginning and end of the instruction.

Syntax is:

·         Beginning tag: <tag-name-and-parameters>

o    Optional parameters have the form: parameter-name="parameter-value"

·         Ending tag: </tag-name>

What is a web site?

A collection of related web pages. In the simplest sense, a web site could be a single web page. The primary starting page of a web site is called the "Home" page. NOTE: This is not the same as the "Home" page of your browser.com

Web Elements-

Pages consist of various elements (objects) that are placed on the page (screen window) as specified by the HTML tags. Some of the things that can be found on web pages includes bellowed .......

• Paragraphs

• Formatted text

• Headings

• Rules (horizontal lines)

• Lists

• Forms

• Links

• Background

• Images

• paragraphs

• Image Maps

• Tables

• Frames

• Forms

• Sound clips

• Video clips

• Java Script

• Java applets

Important Note;

1st of all building a web site it will be to create a folder for the web site. This folder is referred to as site folder. other folders can be created that reflects the organization of the site and its files Inside this folder.

When we build your own web site, some planning should occur ahead of time. After the planning process, you should gather together as many resources as you can and place them in the site folder structure so that they will be available when the pages are constructed.  www this is often the case that you will add to these resources as needed. www

Web Page/Site Terminology

• Web Server - A computer with software that provides web pages to users.

• Web Browser - A program on a user's computer that requests web pages from web servers and then displays these pages.

• HTTP (Hyper Text Transfer Protocol) - The protocol (i.e. rules) for requesting and transmitting web pages between a browser and server.com

• HTML (Hyper Text Markup Language) - The set of formatting and layout "tags" used to define and describe a web page.com

• URL (Uniform Resource Locator) - An "address" of a resource on the web. A URL consists of four parts:

  • Example (the URL of this page): http://ggurug.online.shtml

    • http:// is the Internet protocol to be used by the server

    • ggurug.online is the server's domain name (associated w/ an IP# ....... 60.1.104.04)

    • cs120/lectures/tutor/www is the folder path on the server to the requested file

    • basics.htm is the name of the requested file

Tools for Creating Web Pages-

There are four types of programs that are used to create web pages:

1.     Word Processor or Text Editor: Type the text and tags as needed. If a word processor is used, the file must be saved as a "text" only file. Examples: Notepad.com

2.      (Macromedia/Adobe), FrontPage (Microsoft), and Notepad (open source).

3.     Other Applications: Many application programs include a special "save as HTML" option. Not always the best results, but it basically works. This is not generally the preferred method for creating web pages, although if some information is already in another application, this can be a quick way to publish it on the Internet.

4.     HTML Editor: A lot like a text editor, but commands are included that insert the tags for you (you see them, but you don't need to type them) and associated dialog boxes help with the optional parameters for each tag. Example: EditPlus2 .com

5.     Web Page Authoring Program: WYSIWYG programs that are more like a word processor. In these programs, you do not need to see or use the actual HTML tags (the program does this for you in the background). Most of these programs will let you see and edit the actual HTML. Examples: Dreamweaver

The best and most versatile tool for creating web pages is a Web Page Authoring Program. For this course we will be using Notepad because it is simple and free (open source).

A copy of the installer for Notepad is included on the course CD. If you have not yet installed this program on your computer, you need to do so now.

1.     Put the CD in your computer's CD or DVD drive. A menu will auto-launch (be patient, it takes a few seconds ... seems like minutes).

2.     Click on the Notepad++ installer option.

3.     Follow the on-screen directions (it is recommended that on the fifth screen you check one or both of the checkboxes to create icons on the desktop and/or the quick-launch toolbar).

But 1st ly Think and Plan

Before web pages are created, there are several things that need to be considered and accomplished first.

• Collect the Information - Do the research and gather together the information that will make up the web page/site. Web sites are not static, therefore this is actually an on-going process. But before you begin, you should have the basic information available.

• Determine the Organization - How is the information going to be organized on the pages.

One basic design option is to have an opening page (called the "home" page) that gives an introduction to the site and acts as a table of contents with links to the other pages (each page with its own purpose ... like a chapter of a book or a section of a report).com

• Determine the File Organization - All of the pages and supporting files for a web site are placed in a single folder called the "site folder." With everything in one folder, the web site can easily be moved to a server or another storage device without causing problems with references to graphics or links to other pages. Inside the site folder, files are organized using other folders that will reflect the organization of the site. NOTE: The site folder is VERY important. The first step when creating a web site is to create the site folder and make sure everything is placed in this folder.

• Collect the Supporting Graphics - Note that I said "supporting" graphics. Graphics should enhance the information, not detract from it. Every graphic should have a purpose!

  • The actual graphics are not part of the web page file. They are separate files and the web page includes references to these files. They should be in the same folder as the page that will reference (i.e. contain) them, in a nested folder, or in a shared graphics folder (i.e. a single folder inside the site folder).com

  • NOTE: All graphics MUST be placed in the site folder BEFORE they are placed on a web page. Also, the web page must be saved in the site folder BEFORE the graphics are placed on the page (of course, you must save again after the graphics are added)..

  • Graphics for web pages use three formats: JPG (for photos), GIF (for everything else), and PNG (not used much). www

  • Try to make you graphic files as small as possible (small meaning file size, not necessarily dimensions).com

  • Before placing a graphic on a web page, the file must be properly located relative to the page's file. If you change the graphic's size, filename, or location; you will need to re-insert the graphic on the page.

File Folder Naming Rules for Web Page-

Legal file and folder names are technically dependent on the operating system of the web server and the web server software. To remain consistent and to be able to easily move a web site from server to server, the following guidelines should be followed in order to keep these names as generic as possible.

·         No spaces. Use only letters, digits, dashes, and underscore characters.

·         Filenames should be considered "case sensitive" because some operating systems and their web servers are case sensitive. It is common, for consistency. to always use all lower case letters for all file and folder names.

·         Web pages will use the extension .htm or .html (depending on the requirements of the server). Other extensions can be used for special purposes, but this course will not be considering those situations.

·         Graphic files must use the appropriate extension (JPG, GIF, or PNG).

·         The "home" page of the web site should be index.htm or index.html. By using this name, the user that accesses the web site will not need to enter the filename in the URL. This is considered standard practice and good design. www

Web Page Layout Considerations

There are three primary software tools for publishing information. Word processing, desktop publishing, and web publishing. Although they all have basically the same purpose and therefore have many similarities, they are all different in many ways.

Some of the unique aspects of web pages in web site include:

• You cannot control the page size because you do not know what size monitor the user has, what resolution their monitor is set to, or how large the window is on their screen. www

• You have limited control over the location of graphics on the page..

• You have limited control over the font that will be used to display the page (i.e. typeface and size). Even if you specify a font, you do not know if the user has that font available on their computer. Therefore, when fonts are specified, always use common font typefaces. www

Why these limitations? Because web pages are designed to be platform and browser independent..

HTML Basics

In this class, we will not be working much with actual HTML coding, but you should understand some of the basics. A minimal web page will include the following HTML

<HTML>

   <HEAD>

   <TITLE>Page title.</TITLE>

   </HEAD>

   <BODY BGCOLOR="#ffffcc">

   <P>Hello world.</P>

   </BODY>

</HTML>

The colors above show the pairs of tags. Each tag is placed between a pair of "angled brackets" (i.e. <>). Most tags come in begin/end pairs. Each pair uses the same name. The beginning tag may include parameters (the body tag above is an example). The ending tag begins with a forward slash (/) character. HTML tags may be nested (that is one pair inside another pair). The tags in the above example accomplish the following:

• <HTML>begin  End </HTML> Marks the beginning and ending of the page. information. Anything outside this pair will be ignored by the browser..

• <HEAD> Heading </HEAD> Marks the "head" section of the page. www This section is used to provide information about the page. Its content is not included in the main page window in the browser..

• <TITLE> </TITLE> Specifies the page title. This title is displayed in the title bar (the colored line at the top of the window) of the browser program and on the tab (if your browser uses tabs). This title is also used when the user bookmarks your page. www

• HTML is NOT case sensitive, line sensitive, or spacing sensitive all

• <BODY> all info </BODY> Marks the "body" section of the page. This section includes all of the information used to display the page in the browser, therefore most of the web page description goes inside this tag pair. In the example above, this tag includes a parameter (BGCOLOR="#ffffcc") that specifies that the background color for the page is to be light yellow (How did I get light yellow from this? Color specifications will be discussed later)..

• <P> paragraph </P> This final tag pair specifies the beginning and ending of a paragraph. Every paragraph must be enclosed in a <P> tag pair. www

Therefore, the result of the above code would be a page containing a single paragraph that says, "Hello world" Also, we would see the words, "Page title." in the title bar and tab of the browser..

Create a Web Site

Notepad++  is an open source (i.e. free) web page authoring tool. We will use it to create pages that will contain only the most basic web page elements. These elements will include:

• Page Title - displayed in the browser at the top of the window above the menus

• Colors - setting default colors for the background, text, and links

• Headings - titles and sub-titles (bold text that is usually larger than the primary body text).

• Tables - organizes data in rows and columns with or without borders around the cells

• Rules - horizontal lines

• Graphics - inline or text wrap

• Links - local & external.

• Normal Paragraph Text - body text

• Text Formatting - size, bold, italic, & color

• Paragraph Formatting - alignment & indenting

• Bulleted Lists - technically called unordered lists (options include the bullet shape)

• Numbered Lists - technically called ordered lists (options include the numeration type and the starting number)

Each of these features will be introduced in the following tutorials. As you work through these tutorials you should try everything and experiment with a practice web page.

What is website

A website can be identified by a common domain name and it is also considered as the collection of the webpages. www The published pages belong to one server. The websites can provide us with all the necessary information needed for people across the globe within seconds. The major websites are google.com, wikipedia.org, Entri.com, etc. All the websites which are publicly accessible together comprise the World Wide Web. The private networks can access private websites. The company’s internal websites are an example of a private network. www The website usually has a purpose and must be working on a particular topic. It can be for any purpose including education, news, commerce, social networking, entertainment purpose, etc. www The navigation of each site is possible through hyperlinking. The navigation usually starts with the homepage. The users can access any website from any device. the learners should note that the app used in all the devices to give access to the website is web browser. Without a web browser, you cannot enter into the website. Com

History of Website

World Wide Web (WWW) was developed by Tim Berners-Lee, the British CERN physicist In 1989. The WWWEB was later announced to be used free by anyone across the globe turned out to be a decisive action in the history of the website. the announcement was commenced on 30 April 1993. This led to the growth of the web. To retrieve individual files from the server, initially, FTP  File Transfer Protocol and the gopher protocol were used and is later replaced with HTTP Hypertext Transfer Protocol . These protocols counsel a simple directory edifice which the user steers and they can prefer files to download. It is either encoded in word processor format or is presented as plain text files which seems to be easy and convenient for the users to download and read.

Websites can be utilized in diverse manners. The website can be of different types. It can be a personal website, a government website, an organization website, a corporate website,  etc.  WWW A static website is a website with web pages stowed on the server in the form that is transmitted to a client entrapment browser. It is principally coded in Hypertext Markup Language (HTML). The appearance can be preserved with the help of  Cascading Style Sheets (CSS). WWW A dynamic website is a website that can be customized continually and automatically. The websites can serve different purposes. It can work for an individual, group, or organization. Many of the pages consist of hyperlinks that can easily direct you to the next site. WWW

Types of Websites -

There are several types of websites available to the users in a single touch. Here is the list of the most famous websites

 Affiliate network WEB-

A website that is used to sell the product of a third party. The seller will automatically receive a large sum of money for facilitating the saleS.

 . Celebrity website WEB-

A website that revolves around luxurious celebrity lives where everything related to celebrities and entertainment news is given away to the public through celebrity websites. WWW It can be either official or fan-made. Eg:  jimcarrey.com

.  Corporate website-

The cooperate website can help the users to get hold of the background information about anything under the sun. WWW  Especially the business organizations, services, or multinational company information are provided by the site.

 E-commerce website -

The website offers e-commerce services. The goods will be offered through the website to facilitate the online sale. WWW Online transactions are possible through the site and this enhances the commercial development of the country. Eg: Amazon.com

 Gallery website-

This website can be of commercial or non-commercial nature which focuses on the use of the gallery. WWW The art gallery or photo gallery which facilitates the transmission of culture and art

Malware website -

A website was created to attack the computer of any visitor who visits the sites and download the files given. The users with poor anti-virus protection are their main target.

  Blog WEB -

The website can enable users to post things online. The bloggers use the website to present their ideas and express their feelings on a general or personal topic. Some professional bloggers got paid for their blogs while others are amateurs. WordPress is an example of a website that can help you to create your blogs. BLOG https://sites.google.com/view/informatics-assistant/

Government website-

This website is made by the governmental agencies through which the important notifications, details, and notifies will be shared. This can be either made by the state, local , departmental or national organizations. These can also facilitate tourism. WWW  Eg: Naenara, .GOV.Uk, USA. .gov, WWW

https://sites.google.com/view/informatics-assistant/

Personal website -

The personal website can be used by individuals or small groups of organizations. personal websites are meant to deal with everything personal. The website is destined to cover up anything that the individual tries to convey. It can either be a writing platform or be an entertainment platform. WWW

Online game website -

The website can help the users to play online games as much as they prefer. the online games can be easily downloaded too WWW. Eg: OGame, Travian, Browser games,

 Information WEB site -

The informational sites pass on the information to the general public on various matters. Many of the academic, governmental, and nongovernmental agencies are using the information website to pass on valid information to the public.WWW

•       Internet = Web? No. The Internet is the “network” you “use” to send and receive different kinds of data such as Web pages, email messages, real-time chat messages, multiplayer gaming information, files (file transfers), etc.

•       What does your browser do when it requests a web page?

It asks a web server for a SINGLE FILE that is in a web page format such as html. Web URLs are requests for SINGLE web pages/files from a specific machine on the Internet (a Web server).

•       What is a Domain?

A group of computers and devices on a network that are administered as a unit with common rules and procedures. Within the Internet, domains are defined by the IP address. All devices sharing a common part of the IP address are said to be in the same domain.

•       What is the URL part of a request?

URL is the abbreviation of Uniform Resource Locator. It is the global address of documents and other resources on the World Wide Web. For example, www.webopedia.com is a URL. A URL is one type of Uniform Resource Identifier (URI); the generic term for all types of names and addresses that refer to objects on the World Wide Web.

A Web browser sends an http (Hyper Text Transfer Protocol) or https request to a web server by resolving the server's domain to an IP (Internet Protocol) address (like 128.125.121.22). The Web server responds by sending back the (HTML) document (file) that was requested. The browser then displays the file graphically according to its HTML and CSS instructions.

•       Parts of a URL

•       The first part of the URL is called a protocol identifier and it indicates what protocol to use, and the second part is called a resource name and it specifies the IP address or the domain name where the resource is located. The protocol identifier and the resource name are separated by a colon and two forward slashes.

https://sites.google.com/view/informatics-assistant/

•      HTML Syntax

•    All tags are defined or delineated by greater-than and less-than brackets. In keeping with the majority of tags controlling display "modes", most tags are started with their core tag (eg. <strong>)) and then ended or "closed" by having their core tag repeated with a slash before it (<strong>Worlds</strong>).

• Note: Tags that insert items, such as images, horizontal lines, and line breaks, do not have modes but rather are one-time instructions. These tags therefore do not technically "close" (because they are complete when first called). For instance, "Hello<br>World" would have "Hello" and "World" on two different lines because the br tag inserts a "line break" in between them.

•      Attributes

•    HTML tags are made of up two components: their core "tag" or name, and additional attributes. For instance, the "anchor" tag a that creates hyperlinks is not just <a>, but has other needed "attributes" such as the destination of the link. Almost all tag attributes consist of an attribute name followed by an equal sign followed by an attribute value in quotes. All attribute-value pairs are separated from each other (and the core tag) by spaces. So for instance, an image-insertion instruction might be <img src="mypicture.jpg" alt="my pic" />

•       The majority of learning HTML consists of learning the core HTML tags and their attributes. Some tags will have no attributes, and others might have multiple attributes such as those for images, hyperlinks and form objects.

•       There is a set of html tags that every web page should contain. I like to call this the "html skeleton". These tags are: html, head and, body. Additionally, conventionally a web page's head should also contain a title tag.

•       Basic HTML Taglines:

•     <html> , <head> , and <title> : Structural tags that every Web page should contain (see "html skeleton" section of the "Basic HTML Tags" resource page.

•     <body> : Besides being a structural tag, style formatting applied to the body effects the entire page, such as <body style="background-color: gray; color: green">

•     <a> : anchor tag, used to create links between pages. Needs to have an href attribute to tell it where the link should go. So for instance <a href="http://www.latimes/com">Link to LA Times</a>

•     <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Used to apply relative size and weight to phrases or headlines. H1 is the largest and boldest, and H6 is the smallest (far smaller than "normal" text size)

•     <p> : Used to define a "paragraph" on a page. Can also be used to apply alignment such as <p style="text-align:center">This is centered</p>.

•     <hr /> : Used to create a horizontal rule (line) across the page. Can set its width through a style call such as <hr style="width:90%" />

•     <ul> and <li> Create an unordered list. The <ul> defines the overall list. And <li> defines the individual "list items" in the list. For examples, List of colors<ul><li>Blue</li><li>Green</li><li>Red</li></ul>.

•     <strong> : used to make text bolder

•     <em> : used to emphasize text through italics

•     <br />: Creates a line break in page

•     <ol> and <li> Create an ordered list of items. Operates structurally the same as <ul> and <li>.

1. How do you use e-commerce tools in web publishing? 

2. How do you use analytics tools in web publishing?

3.  How do you use marketing and advertising tools in web publishing? 

4. What is web publishing?/

5. How do you use CSS and JavaScript in web publishing?

6. How do you use HTML and XML in web publishing? 

7. How do you use databases in web publishing?

8.  How does web publishing work?

9. What are the main tools and technologies used in web publishing?`

10.  How do you add interactive features to a website using web publishing tools?.

11. How do you optimize a website for search engines using web publishing tools?

12. How do you test and debug a website using web publishing tools?

13.  How do you publish a website to a web server using web publishing tools?

14. How do you create a website using web publishing tools?

15.  How do you design and layout a website using web publishing tools?

16. How do you add content to a website using web publishing tools?.

17. How do you use version control in web publishing?

18. How do you use templates and themes in web publishing?

19.  How do you use SEO tools in web publishing?

20. What are the best practices for web publishing?