Web Development

The internet is a global system of connected computers and networks. These computers are host computer servers that store collections of text, graphics, videos, etc. that make up web pages. The internet uses a set of rules so that these connected computers can communicate with one another. The set of rules is called TCP/IP Protocol. This Web of computers depends on the internet to connect all its files together so that people can get to and access the web pages that the host computers store. The internet is a giant wired mechanism that moves files from one computer to another. It locates files using an URL (Uniform Resource Locator) address. For example, http://www.moomethods.com is a URL. Computers actually work with numbers and Humans work better with words. So, the URL was designed so that it would be more user friendly to Humans. The computer actually takes the URL and converts it to an IP Address (Internet Protocol).

HTTP — Hypertext Transfer Protocol
HTML — Hypertext Markup Language

These are the two specifications that define the Web. Hypertext is the underlying purpose behind the web. Hypertext is text that contain links to other pages, text, images, videos, etc. stored anywhere on the internet. All this information is linked together like a huge spider web.

A Web Browser is a program that allows users to access the Web and view the linked information. The web browser can request a web page from a web server. This request is an HTTP request. To request a page from a browser window, just type in the url for the page in the address bar. For example, open Internet Explorer and type in http://www.moomethods.com This is an HTTP request to view the information on Moomethods Home Page. The Web Browser will request the page using the http request. Before the page is displayed and behind the scene, the web page may also use an http request to the server for any other files, such as graphics, images, ads, etc. that are to be displayed on the requested web page. So, after a web browser requests a web page, the files that make up the web page are retrieved from one or more web servers and those files are assembled into one page in the browser display window on your computer screen. Currently, the most popular web browsers are Internet Explorer, Chrome, and Firefox.

Web Browsers do not display the HTML tags. The browser reads the HTML Document from top to bottom. It displays the content that is inside of the tags. The type of tag that is used determines how the browser will format the content.

HTML is an acronym for Hypertext Markup Language.
HTML is the most basic language used to write web pages. Each basic web page includes a text file written in HTML format. HTML is a specific way to add tags to regular text. Tagging the text allows the web page formatting and linking information to exist in the same file with the regular text. A markup language uses tags within the text. These tags give display instructions to the web browser. For example, if you want text to display as a paragraph then the text should be contained inside of the paragraph tags. If you want text to appear as a Heading then the text should be contained inside of the heading tags. Following are some examples:

Most HTML tags come in pairs. One tag marks the beginning and the second tag marks the end. The text between the beginning and ending tags is formatted in accordance with the type of tag that is used. HTML Elements are defined by HTML Tags. An HTML Element is normally defined as the beginning tag, the content between and the ending tag. It is everything from the start tag to the end tag.

There are some tags that only use one tag. These tags create Empty Elements because there is no content contained. An example is the <br> tag. This tag tells the browser to create a line break on the page.

HTML defines the structure of the web page. When creating web pages, HTML Elements are used to structure the content. An HTML Element is an individual component of an HTML document. HTML documents are composed of a tree of HTML Elements. These Elements are called tags and attributes. There are two types of tags. There are Semantic Tags and Structural Tags. Semantic Tags provide meaning to the web browser. For example, content inside of the paragraph tags tells the browser that the content between the opening and closing tags is a paragraph of text. Structural Tags are used to organize content. For example, the <div></div> is used to divide the page content into sections.

HTML Tags create Block Level Elements or Inline Elements. When Block Level Elements are displayed their default browser display causes them to take up the whole horizontal line on the page. They are also always followed by a line break. Inline Elements are displayed next to each other on the same horizontal line. They do not have a line break after the closing tag. An example of an inline element is the <span></span>

HTML Elements can be nested. This means that elements can be contained inside of other elements. Following is a basic web page structure:

<!DOCTYPE html>
 <html>
  <head>
   <title>My Web Page</title>
  </head>
  <body>
   <h1>This is a Heading</h1>
   <p>This is a Paragraph.</p>
  </body>
 </html>


The first tag is the Document Type Tag <!DOCTYPE html>. It is an empty tag so it has no closing tag. It's purpose is to let the Web Browser know what that the document type is HTML.
The second tag is the HTML Starting Tag <html> It lets the browser know that the HTML Code is Beginning.
The third tag is the Head Starting Tag <head> It lets the browser know that the head section of the page is beginning. The tags that go inside of the head section are not displayed by the browser in the web page.
The fourth tag is the start and end Title tags with content between. This lets the browser know the title of the page and it will display the title in the browser tab at the top of the browser window. After all the Head content there is a Closing Head Tag.
The fifth tag is the Body Starting Tag <body> All of the web page content that will be displayed by the browser is contained inside of the Body Tags.
The Sixth Tag is the Heading 1 opening and closing tag along with contained content.
The Seventh Tag is the Paragraph opening and closing tag along with contained content.
Then finally the Body and HTML Tags are closed.
Notice how tags are nested inside of other tags. The Heading and Paragraph are nested inside of the Body. The Title is nested inside of the Head. Everything but the Document Type is nested inside the HTML Tags.

Use a basic plain text editor to create HTML Documents. It is not a good idea to use a word processor. Word processors like Microsoft Word adds formatting to the text. Web Browsers may not display the content correctly if you do not use a plain text editor. You may use Notepad which comes with PC or TextEdit that comes standard with Mac. However, there are much better text editors available that provide auto fill options for coding. I personally use Adobe Dreamweaver but there are many other programs that you can choose.