• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html and css for web design neophytes
 

Html and css for web design neophytes

on

  • 15,085 views

A simple guide for the newbies in website design and developments

A simple guide for the newbies in website design and developments

Statistics

Views

Total Views
15,085
Views on SlideShare
15,085
Embed Views
0

Actions

Likes
1
Downloads
161
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html and css for web design neophytes Html and css for web design neophytes Document Transcript

    • Become a web developerREXCORPCYBER http://www.rexcorpcyber.net Written by: Joseph Orekoya
    • HTML AND CSS FOR WEB DESIGN NEOPHYTES WITH SUPPORT FROM
    • Joseph Orekoya is a certified information security expert (CISE) with interest and knowledge ofdifferent operating system, computer hardware, networking, ethical hacking, information security,reverse engineering, and cyber forensics. He is a web application penetration tester.Joseph found Rexcorpcyber in the year 2011 where he writes on networking, programming/web design,ethical hacking, and forensics. He is also a writer at the InfoSec institute specializing majorly onpenetration testing and forensics.
    • This book is dedicated to God and my family
    • This book would not have come into existence without the help of God. I therefore appreciate him forthe strength and intuition he gave me to put this book into existence.A big thanks to W3C (The Consortium) for helping me understand everything I needed to know aboutHTML through the W3school pages and this is what made me capable of being able to have a knowledgeon this to share. Also I should say thanks to the coders of some amazing websites on the World WideWeb that made nice web pages I could inspect and work on.Thanks to Mr Doyin Ijiwola the manager of Integrated Orange for providing me with useful tipsTo the readers of the book, I appreciate you for spending some of your time with this book. I’m sure youwouldn’t regret it.
    • With the advancement in the world, paper work is being reduced with the use of internet. This does notoccur to paper works and write-ups only. The introduction of internet and World Wide Web has alsomade many things easier (Both positive and negative). Now you do not need to wait for mails from thepost men all the time while you can simply send mails to anyone over the internet. The business peoplealso do e-banking, and every form of e-commerce on the internet. The students do things likeapplication to different institutions, and e-learning. The internet has saved us our time. We do not needtotal proximity with the places of our knowledge acquisition. It is very easy as you can make use ofsearch engines to find just what you want anytime on the internet.Most of the uses of internet mentioned above are made possible through a platform which allows usersinteract with the web. These platforms are websites. HTML is a popular scripting language that is usedto build most of those websites you see on the internet. With the discovery of World Wide Web, HTMLnow suffers in the hands of a lot of web designers and coders because it is used to build websites andeach organization need to take their product on the internet. Each individual wants to blog, theacademic institutions wants to admit, and so many other reasons.This book is designed to help you understand HTML and how you can use it to make your own websites.We will go further by telling you about web hosting and search engine optimization which will beimportant to you as a web developer. At some points in this book, you may need to do some moreresearch or practice if you are enthusiastic to learn more. In that case, we are recommending the W3Cconsortium website as a place for you to learn more. Visit their website - http://w3schools.comWe also assure you that this book is not plagiarized and all that you will see here is the detailedhandwork of the writer’s research.
    • Introduction to HTML……………………………………………………………………………………………………………….. 9Text editors……………………………………………………………………………………………………………………………... 11Terminologies in HTML...…………………………………………………………………………………………………..……… 12 Tags…………………………………………………………………………………………………….……………… 12 Containers………………………………………………………………………..…………………………………. 13 Contents…………………………………………………………………………..…………………………………. 13 Attributes……………………………………………………………………………………………………………. 13 Elements…………………………………………………………………………………………………………….. 14List of HTML tags…………………………………............………………………………………………………………………… 14Declarations in HTML……………………………………………………………………………………………………………….. 17Versions of HTML 4.01………………………………………………………………………………………………………………. 17Document Type Definition………………………………………………………………………………………………………... 18Use of the HTML tags……………………………………………………………………………………………………………….. 18 Comment tag<!--..-->……….……………………………………………………………………………….. 18 Anchor tag<a>…………………………………………………………………………………………………….19 Body element<body>………………………………………………………………………………………….19 Bold tag<b>……………………………………………………………………………………………………….. 20 Line Break tag<br>……………………………………………………………………………………………… 21 Button tag<button>……………………………………………………………………………………………. 22 Head element<head>………………………………………………………………………………………… 22 Head line tag<h1-h6>…………………………………………………………………………………………. 22 Paragraph tag<p>……………………………………………………………………………………………….. 22 White spaces……………………………………………………………………………………………………… 23 Font tag……………………………………………………………………………………………………………… 23
    • Horizontal rule<hr>…………………………………………………………………………………………… 24 Form tag<form>………………………………………………………………………………………………… 24 Image tag<img>………………………………………………………………………………………………… 25 Unordered list<ul>……………………………………………………………………………………………. 27 Ordered list<ol>……………………………………………………………………………………………….. 27 Definition list<dl>…………………………………………………………………………………………….. 30 Table element<table>………………………………………………………………………………………. 31Font and Phrase mark-up elements……………………….…………………………………………………………………. 34Attributes…………………………………………………………….…………………………………………………………………. 35HTML special characters…………………………………………….…………………………………………………………….. 36Cascading Style Sheets (CSS)…………………………………………………………………………………………………….. 37 Element Selector………………………………………………………………………………………………. 38 Class Selector……………………………………………………………………………………………………. 39 ID selector………………………………………………………………………………………………………… 39 Pseudo selector………………………………………………………………………………………………… 40 CSS comments…………………………………………………………………………………………………… 40CSS properties and values……………………………………………………………………………………….………………… 42HTML Status Codes…………………………………………………………………………………………………………………… 44Web Hosting……………………………………………………………………………………………………………………………. 47Domain Naming System (DNS)…………………………………………………………………………………………………… 48Search Engine Optimization (SE0)………………………………………………………………………………………………. 53
    • This book will teach you how to work on HTML but we will specialize on XHTML which will help you workacross various platforms and we believe that by the when you get to the end of this book, you will beable to design wonderful websites and a lot more with this knowledge. One thing you should know isthat your ability to write HTML scripts does not make you a programmer but a coder. HTML is not aprogramming language because it does not require compiling our script to be understandable by somecomputer but instead, it just run as is. All you need to do is to write your HTML script and run it on aweb browser without compiling. Before we proceed, I will take you through the timeline of web design.HTML means Hypertext mark-up language and it was developed in the early 1990s by some scientists inorder to share scientific papers over the internet.HTML is based on SGML- Standard Generalized mark-up languageWhen the HTML concept was born, the World Wide Web (www) had not come in existence. As soon asit did, the HTML became something more than just a scientific stuff as it was needed to share resourcesover the web. It went beyond a script for just pictures and images because it was also required forpresentations. At this point, with the need for presentations HTML4 was brought into existence. Butsome flaws were found in HTML4 and that is the reason why I said from the beginning of this chapterthat we will deal a lot more with XHTML in this book.XHTML means eXtensible hypertext mark-up language. For those familiar with other scripting languagelike XML- extensible mark-up language, you will think XHTML is also extensible but no, it isn’t.It is called XHTML because it is based on XML. It has been recommended by the World Wide Webconsortium since January, 2000.The differences between HTML and XHTML are given below HTML takes some weak scripting which makes us categorize it as flexible; but XHTML does not. This is why a lot of people refer to XHTML as the strict HTML. XHTML can be referred to as a completion of HTML codes In HTML, you can begin an element with a paragraph tag and end it with another tag but in XHTML you must close all your tags well like for a paragraph tag, we have <p>Introduction</p> and for some stand-alone tags we have something like <img src=”file.jpg” alt=”file” />. I will explain that much better later in this book. As we can see in the image tag above that there is an “alt” attribute in the image tag. This stands for an alternate text that should be displayed underneath the image especially when the image is not able to load properly. XHTML coders use it as it is part of the XHTML strict rules but the HTML coders do not need this. In HTML, you can get away with the use of uppercase tags like <HR /> but in XHTML, your tags should be in lower case like <hr />.
    • XHTML is parsed using the standard XML parser unlike HTML which requires a lenient HTML- specific parser. XHTML has better interoperability which makes the web designers create better web applications.This is what HTML and XHTML looks like on your text editor:For HTML,<HTML><HEAD><TITLE>INTRODUCTION</TITLE></HEAD><P>REXCORP TUTORIAL SAMPLE</P></HTML>For XHTML,<?xml version="1.0 " encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml 1/DTD/ xhtml11-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>INTRODUCTION</title> </head> <body bgcolor=”#FFFFFF”> <p>REXCORP TUTORIAL SAMPLE</p> </body> </html>Now you are wondering why you should go through all that stress in XHTML when you can represent thesame thing with fewer lines in HTML. This is because XHTML works across more platforms. If you choosenot to write the whole thing at the top before the head tag, you are free to save templates of previouslyedited XHTML files and then copy and paste the headings when you want to begin a new one.Let us take a look at the timeline of HTML:HTML 4.0 is in use today as the popular HTML scripting languageXHTML 1.0 is also in wide use todayXHTML 1.1 is very strict and it relies on CSS for its entire layout. It does not support all presentations anddue to the ginormous use of CSS in it, some web browsers will not open the contents of your websitethe way you want it.
    • XHTML 2.0 was created in 2002 and due to the fact that browser companies rejected it and it did notmeet up the required standards, it was abandoned in 2006. The new features it was to produce includesXForms, XFrames, and DOM events were to be replaced by XML events.HTML 5 It was made to do the work which XHTML 2.0 was intended to do and it has a lot more features.A major thing I love in HTML 5 is the construction from the head of the script which is much simpler thanthe previous ones. It is really good but its features are supported only by few browsers which makes itnot suitable enough for a public website.Now as I said from the beginning of the book, we will focus on XHTML 1.0 because it is the mostcompatible for public websites.A very salient thing you should consider when coding or writing any scripts especially HTML which isconsidered here, is that you should use a text editor to write your scripts. By saying a text editor, I don’tmean anything that can take input from your keyboard. A word processor will not do the work of a texteditor. Word processors include:  Microsoft word- Windows OS  Libreoffice- multi-platform  Abiword- LinuxText editors include  Notepad- Windows OS  Notepad++ -multiplatform  Gedit- Linux OS  Text Mate- Mac OS X  Smultron- Mac OS X
    • The difference between a word processor and a text editor is that a text editor just takes in your textinput the way you put it and there are no further attachments but a word processor does not only saveyour text but it saves the text graphic and some other formatting options. This affects the text a lotmore than you think, and we cannot get a desired outcome with the use of word processors. Anexample of the difference between text editors and word processors is the double quote. On my texteditor, I used a double quote and I got " but on my word processor, I got “ by using a double quote andthat won’t work for keeping an attribute within double quotes as we use to. I will advise the use of texteditors with syntax coloring. As you can see in the example above where HTML and XHTML werecontrasted. The syntax coloring will really be of help to make you know when you are making mistakessometimes.In HTML scripting, we have some terminologies we use to identify various the parts of the script. Theyinclude: tags, containers, contents, attributes, elements.TAGSWhen we say tag in HTML scripting, we do not mean those sticky notes you keep all around your houseor in your PC in order to remember stuffs. In this case, A tag begins with a left angle bracket “<”, andends with a right angle bracket “>” with the name of the tag inside it and they are used to defineelements in our HTML scripts. We have beginning tags and end tags.End tags usually take a stroke (/) which represents the
    • termination of that tag. When a tag is used, it can have aseparate beginning tag and a separate end tag.We also have some stand-alone tags. Stand-alone tagsdo not necessarily make use of the beginning and end tags separatelybecause they can take a much simpler form.In most cases, a stand-alone tag like the horizontal rule (“hr”)will take a form<hr /> because it is easier to be represented this way.However, it can also take a form <hr></hr> but it is really rare to see it being used like this. Stand-alonetags do not usually have any contents but they can have enough attributes. Another example of a stand-alone tag is the image tag. It takes the form <img src=”filename.jpg” alt=”file1” />. One thing you shouldhave noticed here is that before I terminate these stand-alone tags, I leave a space before thetermination stroke. This is not too compulsory because the tag will work just fine without it. It is only atradition in HTML.CONTAINERSA container consists of a beginning tag and a closing tag. They are containers because the tag content iscontained within them. An example of a container is the <p> and </p> containing a content like “I am aweb designer”. The whole thing together will be <p>I am a web designer</p>.CONTENTSFrom our description of containers, it is clear that contents are the stuffs we find in a container. Theyare shielded by beginning and end tags.ATTRIBUTESThe attributes of a tag are the set of rules or instructions that defines how the function of the tag on theweb browser will behave. Also the attributes of a tag gives reference to where some added files shouldbe read from. Example is the attribute of a body beginning tag <body bgcolor=”red” text=”blue”> andanother example is the attributes of the stand-alone image tag<img src=”folder1/file.jpg” alt=”file” width=”320” height=”320” title=”my file” />. In the body tag, theattribute there will make it display a red background color with blue fonts on the web browser. In theimage tag, src represents the source where the image file is stored. As we can see that our image in theexample is stored in a folder named folder1 and the image we need to display on the web browser isnamed file.jpg. In this image tag, we also have the alt, width, height, and title attribute. This attributeswill be discussed in details later in this book.
    • ELEMENTSAn element consists of containers and contents. It is the whole familyof a tag from the beginning tag to the end tag. Some elements containother tags (containers with their attributes and contents).An example is the body element that has sub-tags like theparagraph tags, image tags, linking tags, and others.Tag Description<!--...--> Defines a comment<!DOCTYPE> Defines the document type<a> Defines a hyperlink<abbr> Defines an abbreviation<acronym> Defines an acronym. (not supported in HTML5)<address> Defines contact information for the author/owner of a document<applet> Defines an embedded applet (Not supported in HTML5. Deprecated in HTML 4.01)<area> Defines an area inside an image-map<article> Defines an article<aside> Defines content aside from the page content<audio> Defines sound content<b> Defines bold text<base> Specifies the base URL/target for all relative URLs in a document<basefont> Specifies a default color, size, and font for all text in a document. (Not supported in HTML5. Deprecated in HTML 4.01)<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it<bdo> Overrides the current text direction<big> Defines big text (Not supported in HTML5)<blockquote> Defines a section that is quoted from another source<body> Defines the document’s body<br> Defines a single line break<button> Defines a clickable button<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)<caption> Defines a table caption<center> Deprecated in HTML 4.01. Defines centered text. (Not supported in HTML5)<cite> Defines the title of a work<code> Defines a piece of computer code<col> Specifies column properties for each column within a <colgroup> element
    • <colgroup> Specifies a group of one or more columns in a table for formatting<command> Defines a command button that a user can invoke<datalist> Specifies a list of pre-defined options for input controls<dd> Defines a description of an item in a definition list<del> Defines text that has been deleted from a document<details> Defines additional details that the user can view or hide<dfn> Defines a definition term<dir> Defines a directory list. (Not supported in HTML5. Deprecated in HTML 4.01)<div> Defines a section in a document<dl> Defines a definition list<dt> Defines a term (an item) in a definition list<em> Defines emphasized text<embed> Defines a container for an external (non-HTML) application<fieldset> Groups related elements in a form<figcaption> Defines a caption for a <figure> element<figure> Specifies self-contained content<font> Defines font, color, and size for text. (Not supported in HTML5. Deprecated in HTML 4.01)<footer> Defines a footer for a document or section<form> Defines an HTML form for user input<frame> Defines a window (a frame) in a frameset. (Not supported in HTML5)<frameset> Defines a set of frames. (Not supported in HTML5)<h1> to <h6> Defines HTML headings<head> Defines information about the document<header> Defines a header for a document or section<hgroup> Groups heading (<h1> to <h6>) elements<hr> Defines a thematic change in the content<html> Defines the root of an HTML document<i> Defines a part of text in an alternate voice or mood<iframe> Defines an inline frame<img> Defines an image<input> Defines an input control<ins> Defines a text that has been inserted into a document<kbd> Defines keyboard input<keygen> Defines a key-pair generator field (for forms)<label> Defines a label for an <input> element<legend> Defines a caption for a <fieldset>, < figure>, or <details> element<li> Defines a list item<link> Defines the relationship between a document and an external resource (most used to link to style sheets)<map> Defines a client-side image-map
    • <mark> Defines marked/highlighted text<menu> Defines a list/menu of command<meta> Defines metadata about an HTML document<meter> Defines a scalar measurement within a known range (a gauge)<nav> Defines navigation links<noframes> Defines an alternate content for users that do not support frames. (Not supported in HTML5)<noscript> Defines an alternate content for users that do not support client-side scripts<object> Defines an embedded object<ol> Defines an ordered list<optgroup> Defines a group of related options in a drop-down list<option> Defines an option in a drop down list<output> Defines the result of a calculation<p> Defines a paragraph<param> Defines a parameter for an object<pre> Defines pre-formatted text<progress> Represents the progress of a task<q> Defines a short quotation<rp> Defines what to show in browsers that do not support ruby annotations<rt> Defines an explanation/pronunciation of characters (for East Asian typography)<ruby> Defines a ruby annotation (for East Asian typography)<s> Defines text that is no longer correct<samp> Defines sample output from a computer program<script> Defines a client-side script<section> Defines a section in an element<select> Defines a drop-down list<small> Defines a smaller text<source> Defines multiple media resources for media elements (<video> and <audio>)<span> Defines a section in a document<strike> Defines strikethrough text. (Not supported in HTML5. Deprecated in HTML 4.01)<strong> Defines important text<style> Defines style information for a document<sub> Defines subscripted text<summary> Defines a visible heading for a <details> element<sup> Defines superscripted text<table> Defines a table<tbody> Groups the body content in a table<td> Defines a cell in a table
    • <textarea> Defines a multiline input control (text area)<tfoot> Groups the footer content in a table<th> Defines a header cell in a table<thead> Groups the header content in a table<time> Defines a date/time<title> Defines a title for the document<tr> Defines a row in a table<track> Defines text tracks for media elements (<video> and <audio>)<tt> Defines teletype text (Not supported in HTML5)<u> Defines text that should be stylistically different from normal text<ul> Defines an unordered list<var> Defines a variable<video> Defines a video or movie<wbr> Defines a possible line-breakI have shown a structural difference between HTML and XHTML and we could see that the majordifference was the whole declarations given at the beginning of the document. In this section of anXHTML script, some special declarations are given. For now, you can just write it the way we have itthere but soon enough, you will be able to change some things there to suit you just the way you wantit. In order to do that, we will break down each section of these declarations and tell you why they arethere and the purpose they serveXHTML 1.0 TRANSITIONALThis is the XML equivalent of HTML 4.01 Transitional, and it includes the presentational elements suchas the font, center and strike which are not included in the strict version.XHTML 1.0 STRICTThis is the XML equivalent of strict HTML 4.01, and it includes elements and attributes that have notbeen marked deprecated in the HTML 4.01 specification.XHTML 1.0 FRAMESETIt is the XML version of HTML 4.01 frameset, and it allows the definition of framesets documents-common web features used in the late 1990s.
    • In this section, you can specify the kind of document you want given the following options. It matters alot because there may be other kind of documents on the web that may not behave just like what youwant which is HTML. Specifying that your document is HTML really goes a long way in making your workbetter.I will not discuss all the tags listed but I will discuss the ones you need to know. As time goes on, you willuse the other tags properly because you will be a good HTML coder when you reach the end of this bookand your curiosity will make you learn more.<!--..-- > COMMENT TAGIn programming and coding, there is always a feature for comments. Comments are very useful inprogramming because it helps the code writer recall the use and application of some scripts and it alsohelps other users to understand what has been coded my the script owner. Unlike some programminglanguages and scripting languages that we have single-line tags and double-line comments in differentforms, HTML has just this type of comment and it can work as single-line comments and multiple-linecomment so far the tag is not closed yet. If you do not understand me, I guess the scripts below shouldhelpHTML single line comment <html> <!-- This is a comment -- > </html>HTML double-line comment <html> <!-- This is a comment but it did not end there, my comment ends here --> </html>I believe that made it clear on comment tags.<!Doctype>As we spoke briefly on the declarations, we know the Doctype tag is used to specify the kind ofdocument we are dealing with. It is the one that carries information if we are using XHTML or just HTML.Enough examples on its usage have been shown earlier.
    • <a> The anchor tagThe <a> tag is used to give links in a web page. It is one of the most used tags in any website because ithelps you select other pages in a website besides the Home page. For everything you click on theinternet that takes you to an entirely new URL, there is an anchor tag behind it.Usage: <html> Visit <a href=”http://rexcorpcyber.net”>Rexcorpcyber</a> for more. </html>The code above will display “Visit Rexcorpcyber for more” without quotes in the web browser and youwill be able to click the word “Rexcorpcyber” as a hyperlink to that website directly rather than havingto copy and paste it into your web browser address bar. Some other attributes can be used along withthis, like the title attribute. One important thing I must point out is when you want to make a hyperlinkreference of a website that is not a folder in the directory of your web page, you should specify theprotocol. For example, it we had href=”rexcorpcyber.net”, it would assume there is a folder like that inour web directories, and when a user tries to click, the get something like “Page Not Found: 404 error”.So this is shy we have href=”http://rexcorpcyber.net” instead.<b> Body element/tagIn the (X)HTML script, the two major elements are the head and the body which have other sub tags.The body tag contains the structure and formats of paragraphs, tables, and all that we see on our webbrowser page. Within the body tag, we can also specify the background color or background image wewant for our web page. Let’s see how it works: <html> <head> <title>Background </title> </head> <body bgcolor=”red”>Testing background</body> </html>On our browser we have
    • For a background image, we have <html> <head> <title>Background </title> </head> <body background=”images/kobe.jpg” text=”#FFFFFF” >Testing background</body> </html>I had to change the text color to white because the black font would not be visible in this background.And that on the browser is: It is a good habit to get used to double quotes ("") rather than single quotes (). Although, they both work perfectly but when you start dealing with PHP later as a web developer, you may need to reconfigure yourself to start using double quotes when you are already used to single quotes.<b> Bold tagAs the name implies, this tag does what “B” symbol in your Microsoft word does.It makes some of your fonts bolder.It is a font mark-up element. The strong tag alsoperform the same function but the difference is thatthe strong tag is a phrase mark-up element.But since strong is a phrase mark-up element,it may vary on some browsers and give us something
    • different from a bold font. So to be sure to get a bold font, you should use the bold tag which is a fontmark-up element.Usage: <html> You should be <b>bold</b> to hug a Lion. </html>That displays on the web browser as: You should be bold to hug a lion.<br> Line break tagThis tag is used to break lines. It is a stand-alone tag (meaning it doesn’t have contents).Most times, the <br> tag is used withoutattributes but it can sometimes work with some attributes.If you write a script like <html> This is my first line This is my second line </html>The two lines will be on the same line when loaded on a web browser. In order to avoid this, we use thebr tag this way <html> This is my first line<br /> This is my second line </html>In stand-alone tags, we may not have separate end tags like other tags and we can also make it separateif we want like our line break tag can take the form <br></br> but a lot of experienced coders would notwrite a script like that. You can simply put a stroke at the end of your stand -alone tag to end it. On theinternet today, a lot of people don’t close their stand-alone tags. You can use this as <br> also and it willwork but to make you understand the concept of this fully, I will advise you follow the first method inthe example which is <br />. If you have always used Macromedia Dreamweaver before, you will noticethat it makes its line break tags <br /> not <br>. However, a lot of professionals today are lazy to followall these procedures so you may see most web designers today using <br>.
    • <button>The button tag is used to display a button on the web browser which will issue a command whenclicked. Buttons can be used with anchor links and it can also be used with the onclick attribute. Anexample of its usage with anchor links is shown below <p>Click the button to download games<br> <a href="Game_collection.exe"><button>Download</button></a>Our web browser output isThis will download the file we specified with the anchor tag.<head> elementSince the HTML page consists majorly of the head and body elements, and we discussed the bodyelement has to do with what is seen on the web page, the head element is responsible for taking in stylesheets, favicons, scripts, and the title of the page which will be displayed on the tab in the web browser.<h1> to <h6> Headline tagsThese tags are used for Titles and subtitles on a web page. The headline 1 is usually the biggest and ifyou use all the headline tags till the headline 6, you will discover how their sizes gradually decrease.<p> paragraph tagsThis tag defines paragraphs. For each new paragraph you want to start, it is always more suitable to useparagraph tags. The script below shows how the paragraph tag is used with the headline tags. <html> <h1>The First headline</h1> <p>This is the content of the first heading</p> <h2> You can continue the rest yourself </h2> <p>Continue to the h6 tag in your text editor</p> </html>
    • White spaceI have discussed the heading tags and the paragraph tags. During the usage, you may encounter somewhite space behaviors of our XHTML which also apply to HTML. White space includes any kind of spacewithin texts. It may be a space created by hitting the space bar or even line breaks. What we notice isthat the white spaces we leave most times do not matter because XHTML/HTML shrinks the spaces togive a single space. To make this aspect clearer, you can see the example below and how it displays inthe browser as the image shows. <html> <p> This is the content of the first heading</p> </html>The spaces in the script above would not change much so we will have something like the image belowin our browser<font> Font tagThe font tag is used to add special font effects to some portion of our scripts. With the font tag, you canincrease the size of font in a section of your script. The default size of fonts in HTML/XHTML is “3” so Ican simply make some parts bigger by using the size attribute and you can make it any font you haveinstalled on your OS. Usage:<p>This should give us <font face="papyrus" size="5" color="# A62E1B"/>something cool!</font></p>On our browser:
    • <hr> Horizontal ruleThis is a stand-alone tag that is used just like our <br> tagand everything I said about <br> tags apply to it also.Its own function is to create horizontal lineson the web browser. We can use it by typing <hr />at points where we need it.The image below will show you what it does in your browser<form>The form tag is used to add forms on a website. It can be used to design search panes or userverification areas on a web page which provides you with a section to put in your username andpassword. It can also be used for other things like registration forms, radio buttons and more. It ismostly used with the input tag.Authentication Usage: <html> <form method=”post” action=”login.php” /> Username: <input type="text" name="username" /><br /> Password: <input type="password" name="pwd" /><br /> <input type="submit" value="Sign in" /> </form> </html>The action attributes given to the form means when users put in their user name and password, itshould go to a php file on the server that will connect them to the database by verifying their details. Forthe method attribute, there are three major ways with which we can interact with the web and they are:POST, GET, and cookies. This POST method is getting the user details from the html page contents. (Youcan research on GET and cookies)
    • Search Pane Usage: <html> <form name="input" action="html_form_action.asp" method="post"> Search here: <input type="text" name="search" /> <input type="submit" value="Search now!" /> </form> </html>What this does is to use the asp file in the server which has been specified to search all the web pages inthe website for the character the user has placed in it.Radio button Usage: <html> <form> <input type="radio" name="size" value="big" >Big<br /> <input type="radio" name="size" value="small" >Small </form> </html><img> Image tagThis is a stand-alone tag that needs at least one or more attributes to function. The most paramount isthe source attribute which specifies where the image to display on the web browser should read from.Since we are dealing with XHTML, we must consider the “alt” attribute which represents the text thatwill be loaded in the web browsers if the image is not loaded due to cases like bad internet connectionor so. To make a text display when the mouse hovers, we can decide to include the title attribute.Usage:<html><img src=”http://127.0.0.1/image.jpg” alt=”My image” width=”50” height=”50” title=”Click me” /></html>You can also wrap text around a floating picture by adding some attributes in the image element. Theimage below is an example for how text is wrapped around a floating image
    • In the image above, I had to shrink my web browser and I got my text wrapping around the image. Alsoyou will notice I have some space between the image and the text, this is done by using the hspaceattribute. You can add borders to it if you want like I love to sometimes but in this example, I used noborder. The code of that image is shown here:<?xml version="1.0 " encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml 1/DTD/ xhtml11-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Image Float</title></head><body> <p><img src="sqlinjection2.jpg" width="150" height="135" align="left" alt="Sql Injection"hspace="10" border="0" title="learn SQL" /> It took me sometime to really understand the major concept of the structured query language (SQL)and how to use its syntax to invade databases. Anyway, The use of DVWA- Damn Vulnerable WebApplication was a good way for me to begin testing how it may work in reality. By making someresearch, I got to understand manual SQL and automated SQL. Although, most times I love theautomated like when I use sqlmap on my Backtrack 5 distro. Nothing is too difficult to understand ifyou can sacrifice some time for it. </p></body></html>We could see how the horizontal space (hspace) had helped us in making our image look nice even whilein the same line with our text. We can use the vertical space too (vspace) in cases where needed. If youchoose to, you can try it with this same script to see the change it will make. While discussing the <br>, Isaid I will talk about how its clear attribute is used. With what we have in the image, we can decide to
    • make some texts cut from the side of the image and continue under the image by including this at thepoint we want the break<body> <p><img src="sqlinjection2.jpg" width="150" height="135" align="left" alt="Sql Injection"hspace="10" border="0" title="learn SQL" />It took me sometime to really understand the major concept of the structured query language (SQL)and how to use its syntax to invade databases.<br clear="left" />Anyway, the use of DVWA- Damn Vulnerable Web Application was a good way for me to begin testinghow it may work in reality. By making some research, I got to understand manual SQL and automatedSQL. Although, most times I love the automated like when I use sqlmap on my Backtrack 5 distro.Nothing is too difficult to understand if you can sacrifice some time for it.</body>This now gives us the image we have here:We can also use the “all” in place of “left” for the clear attribute in the <br>.<ul> Unordered listThis is used for listing items. It can be used with attributes to make different kind of unordered list. If itis used without the attributes, it just gives us the disc button as default.<ol> Ordered listUnlike the unordered list, the ordered list makes list in ordered forms. It’s the default method ofnumbering is with the use of numbers (1, 2, 3, ….). However, just like the unordered list, we can useattributes to change this default from numbers to upper case alphabets, lower case alphabets,uppercase roman, or lower case roman.
    • <li> List itemThis is used along with the ordered and unordered list. It is used to define the items that will be listed inthe web browser.Usage:Unordered list <ul> <li>Grape</li> <li>Orange</li> <li>Banana</li> </ul>This will use the disc type for us as default without using the type attribute. Other options that could beused include the circle type and square type. This is it with the circle type: <ul type=”circle” > <li>Grape</li> <li>Orange</li> <li>Banana</li> </ul>If you will have listed items under listed items, the default for each stage changes gradually from thedisk type to the circle type and then to the square type like we have below <ul> <li>Grape</li> <li>Orange</li> <ul> <li>Yellow</li> <li>Green</li> <ul> <li>Ripe</li> <li>Unripe</li> </ul> </ul> <li>Banana</li> </ul>And this displays in our browser as
    • Ordered list <ol> <li>Grape</li> <li>Orange</li> <li>Banana</li> </ol>We can decide to nest this one like we did in our unordered list and it works just fine here too but thedifference is that when we are using unordered list for nesting lists, we don’t need to specify the type ateach point because it will automatically change it for us, unlike the ordered list which will still keep thedefault number type for nested items. <ol> <li>Grape</li> <li>Orange</li> <ol> <li>Yellow</li> <li>Green</li> <ol> <li>Ripe</li> <li>Unripe</li> </ol> </ol> <li>Banana</li> </ol>And this will just be displayed like we have below on our browser
    • You may not want that so you can specify the type attributes at each point you are nesting like we havebelow <ol> <li>Grape</li> <li>Orange</li> <ol type="a"> <li>Yellow</li> <li>Green</li> <ol type="i"> <li>Ripe</li> <li>Unripe</li> </ol> </ol> <li>Banana</li> </ol>This gives usThat made it a lot more presentable. We can use the following type attributes:Numbers, A, upper-alpha, a, lower-alpha, I, upper-roman, i, lower-roman<dl> Definition listThe definition list defines some listed items to categories. It doesn’t have attributes like our unorderedlist and ordered list except if it is being used with an attribute that attaches it to a CSS to change the wayit behaves. It has sub tags like <dt> which is the definition term and <dd> which defines the definitionterm specified. It is used this way:
    • <dl><dt>Fruits</dt> <dd>I really love fruits</dd><dt>Money</dt> <dd>Do you really wanna get my opinion on that?</dd><dt>Medicines</dt> <dd>I thought I will get some pizza for pretending to be sick but instead, I found medicines in myfront.</dd></dl>On our browser, this isTable tagsThe table tag has sub tags and it is one of thevery important tags to learn about in HTML scripting.Some of the sub tags used with the table tags werelisted with the list of tasks given previouslybut I will show you all of the major ones here again and their usage. They include:Tag Description<table> Defines a table<th> Defines a header cell in a table<tr> Defines a row in a table<td> Defines a cell in a table<caption> Defines a table caption<colgroup> Specifies a group of one or more columns in a table for formatting<col> Specifies column properties for each column within a
    • <colgroup> element<thead> Groups the header content in a table<tbody> Groups the body content in a table<tfoot> Groups the footer content in a tableUsage: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>On our browser, this will be something like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2Well you can try more options on your own with the way you see it being used in our example. At thispoint, you will notice you are using a lot of beginning tags and tags (sub containers) just within anelement (table element), and there is a big chance of omitting maybe an ending tag of something youhave already opened like while testing this again for the book tutorial I omitted the closing tag for my<tr> and with this, you may be wondering why your script is not running properly on the web browser.This is why I advised from the beginning of the book that you should use a very good text editor. Byclicking the beginning <tr> tag on my text editor, I could easily detect that it had no </tr> ending tag so Imade my amends and tried to run my script again, then I got good results.There are two more tags I will love to talk about and they are <span> and <div>. These tags are used todivide a section of our HTML script and add styles or CSS class. The <span> is used to include styleswithin lines of our html. It can be to make a particular word in a paragraph perform special charactersdifferent from the others. An example is: <p>The old man drank <span style=”color: red”>urine</span> for a dollar</p>This should display as
    • We can also have that as <p>The old man drank <font color=”red”>urine</font> for a dollar</p>. What kind of example is this anyway! lolThe <div> works somehow like the <span> but it is used for applying styles to blocks on an HTML/XHTMLscript unlike the <span> which works only within a line.Usage:<?xml version="1.0 " encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml 1/DTD/ xhtml11-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>R3X got tamed</title></head><body><div style="color: Green" ><h1>The Green part</h1><p> My friends and I love the color green because it seems to scare people when we hack them anduse the color.<br /> This is the reason why greenis used in most matrix GIF images. It makes me remember when I hacked into<br /> my principal’scomputer with a Trojan compiled by me and I defaced his desktop with green messages,<br />showing how much I didn’t like the way he behaved.</p></div><p>Well now I am not a green lover anymore because my last girl friend said she hated the color.<br />Hope you didn’t believe my pseudo biography!!</p></body></html>What was coded above is the one shown in the image below on the browser.
    • Examples of the <span> and the <div> tags have been shown ab initio but we won’t be able to applythese things properly except we learn about CSS which we will at a latter part in this book.While discussing the <b> tag, I discussed briefly on these categories of inline elements. The phrase mark-up elements uses some phrases to describe how a text should be viewed on our web browser. They arelisted below with their usage alongside.  Emphasize:-> <em>Rexcorpcyber</em>  Abbreviation:-> <abbr title=”Rexcorpcyber” >R.</abbr>  Acronym:-> <acronym title=”Search Engine Optimization”>SEO</acronym>  Quote:-> <q>special</q>  Code:-> <code>countdown : : : 5 4 3 2 1</code>  Strong:-> <strong>I want you to know this!</strong>  Definition:-> <dfn title=”a device that forwards data packets between computer networks”>router</dfn>The ones containing the title attribute will display the titles when the mouse hovers around them. Thereare some more phrase mark-up elements you can make research on.The font mark-up elements defines the exact look of our texts in our web browsers. They are listedbelow with the usage  Bold:-> <b>I want you to see this clearly</b>  Italics:-> <i>This is italics</i>  Strikethrough: <s>corruption</s> OR <strike>corruption</strike>  Big:-> <big>This should be bigger</big>  Small:-> <small>I’m intimidated because I’m small</small>
    •  Underline: <u>This is underscored</u>Check for more font mark-up elements if you will love to use them.We have been used various attributes in our previous examples and with the way I explained thesegments in HTML/XHTML, I believe by now you should have a basic knowledge of what attributes are.However, I will go further to tell you a little more about attributes. We know we can have attributes likewidth, height, href, src, and more with some specified tags but not all the tags will accept the writtenattributes. There is something called the “Global Attributes”. This consists of (X)HTML attributes that canwork with any tag and are not restricted for any reason whatsoever. They are listed below Attributes Description accesskey Specifies a shortcut key to activate/focus an element class Used to refer to class names in a CSS contenteditable Specifies whether the content of an element is editable or not contextmenu Specifies a context menu for an element. The context menu appears when a user right-clicks on the element dir Specifies the text direction for the content in an element draggable Specifies whether an element is draggable or not dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped hidden Specifies that an element is not yet, or is no longer, relevant id Used to select id for an element from CSS lang Specifies the language of the elements content spellcheck Specifies whether the element is to have its spelling and grammar checked or not style Specifies an inline CSS style for an element tabindex Specifies the tabbing order of an element title Specifies extra information about an element
    • There are some times we need to replace some common words with HTML special characters whencoding our HTML script. Some of these special character entitiesact as equivalents for normal texts in HTML. In cases whereyou need to discuss something on tags, you may opena paragraph tag <p> and put in an image tag descriptionwhich you want to be displayed on your page by writing <img src=”http://imagesource.jpg” alt=”image” /> in your text editor. You will realize this is producingan image if the source really exists. And if it doesn’t, then you will get your alt text displaying where yourparagraph example is meant to be displayed. To avoid this mayhem, I will replace our previous imagetag with special entities like &lt; img src=”http://imagesource.jpg” alt=”image” /&gt; and this will displayjust what we want as <img src=”http://imagesource.jpg” alt=”image” />. I decided to include this in thisbook to help you clear that which was not so clear to me when I was working on one of my first HTMLprojects. There are a lot more special characters that will be listed below with a description of how theywork or the characters they replace. HTML special entities can also be used to present some otherlanguages like Chinese, Arabic, or Hindi on our browser (language that are not in words).Special characters Symbol Descriptions/meaning&#39; This is the apostrophe (single quote) symbol&nbsp; No break space- is used to avoid a page break at a point in our texts.&lt; < This is the less than symbol used for our HTML tags&gt; > This is the greater than symbol used for our HTML tags&amp; & This represents the ampersand symbol.&copy; © Copyright&reg; ® Registered&trade; ™ Trademark&#64; @ At symbol&frac12; ½ This defines a fraction ½. You can try other
    • fractions&#22312;&#24744;&#30340;&#30005;&#23376;&#37038; 在您的电子邮 That’s some Chinese. (I don’t know what it means!)There’s so much more that I will not be able to list in this book but you can check out the URLs below forsome awesome HTML entities you may needhttp://www.ascii.cl/htmlcodes.htmhttp://www.utexas.edu/learn/html/spchar.htmlCascading style sheet is a scripting language that is used to style our web pages. From the namecascading, it allows overlaps which could be better described as inheritance. The concept is to makevarious pages inherit styles from just one file containing the styles. Although, sometimes CSS isembedded within our HTML codes but it is also very useful when we are creating a lot of pages whichwe want to share a similar style. I am not saying CSS will make your content for you! You have to makeyour contents with (X)HTML and then you can leave CSS to handle the fonts, background, link effects,tables, paragraphs, and much more. The point is HTML helps you with the structure of your web pages,and CSS helps you with further formatting that the HTML is not capable of implementing. You may bethinking “I think I can live off without CSS anyway, why is it so important?”. Yea! CSS is not compulsoryfor your pages but it really helps in beautifying your pages in a way that HTML can’t. Remember! Whenwe discussed about the <hr> tag, we never spoke of anything like <hr color=”red”>. This is because hrtag can’t take the color attribute and also, color is not a global attribute to fit into any element. Butsometimes, you want your hr tag to take a different look on your web page and this is one of the waysCSS can really help you. Also, when you start hosting your pages on web servers, your ISPs/web hostsmay begin to complain about over usage of provided bandwidth. When a single HTML document ofyours is containing too many things, the file gets larger in size. To prevent this, external CSS can help youmaintain one style on one document for several HTML pages you will have on your web server.(Trust me I never felt like a web designer when I knew just HTML, but with CSS there’s a big difference).That’s enough introduction on CSS, the question now is: “How do I get this CSS into my webpages? ”
    • A CSS script consists of a selector, property, and the property value.Just like we had some labeled parts in our HTML in order to help us know the various segments of ourHTML script, the image below will explain the parts of a CSS script.The selectors help you point at objects on your HTML script and apply styles to them.TAG/ELEMENT SELECTORThe tag selector will point to tags in the HTML script and apply styles to all the selected styles. h1{ color: blue; font-family: verdana; size: 10px; }
    • CLASS SELECTORThe class selector usually takes a period (.) in front of it and it is called on the (X)HTML script as a classattribute. .topic { color: blue; font-family: verdana; size: 10px; }To specify the element the class will be used with, we can name the element and the class together h1.topic { color: blue; font-family: verdana; size: 10px; }In the HTML file it isID SELECTORThe ID selector is similar to the class selector but it is not to be called as often as a class selector. Once itis called once in a (X)HTML file, it can’t be used again. It takes the pound sign (#) in front of it and it iscalled on the (X)HTML script as an id attribute. #family{ color: blue; font-family: verdana; size: 10px; }
    • PSEUDO SELECTORPseudo selectors take the column (:) and may not need any attributes to call them on the HTML script.The image above shows a good use of the pseudo selector. These styles are automatically applied to allanchor tags in the (X)HTML document except if there are divided segments with separate styles. Thea:link selector defines the way hyperlinks appear on the web page, a:hover is the behavior of thehyperlink when a mouse hovers around it, and the a:visited is for displaying the behavior or look ofvisited websites that have either been clicked from the hyperlink given or visited at all on the webbrowser with a cache still left.COMMENTS IN CSSWe talked about comments in our XHTML section and now you should know why it may be necessary tohave comments in your code. The comments in a CSS script takes the form /* This is a comment */
    • Now let’s observe how the Style sheets are called in the (X)HTML documentYou should notice we had something like <link href=”css/testus.css” rel=”stylesheets” type=”text/css” />in our head element. That gives us the freedom to add classes, identifiers, or whatever CSS we areadding besides the span and div.There are other ways we can call our style sheets into our HTML. They are:The <span> and <div> tags- They help you divide sections of your HTML script for special formatting. Youcan use inherited styles with them or apply their own styles using the style attribute. While discussingtags, I showed an example of how these tags may be used.<style type=”text/css”> some properties and values </style> - The style tag also allows you put yourstyles directly in the head element of your HTML document without having to import document from aseparately existing file.<style type=”text/css”> @import url(../stylesheet.css) </style> - You can also use the style tag to importexternal style sheets this way in the head element.Now you’ve set a style to your paragraph tags <p> in an external CSS file, you set something else usingthe style tag in your head element, and you have also made an inline format with the span tag for your<p> tag and you are wondering which of the styles it will obey. The HTML document obeys stylesfollowing the order below - Inline styles <span> - Head styles <style> - External styles <link>
    • One interesting feature in CSS is you that you can combine selectors and apply styles to them. Then we can have something like: h1, h2, h3, h4, h5, h6 { color: blue; font-family: helvetica; }The properties are similar to what we call the attributes in our (X)HTML and they usually take a value.Example of a property is the “color” and that may take a value like “blue”.When writing a section of our CSS with its selector, properties, and values, we need to use curly bracesto indicate our beginning and end just like we have the beginning and end tags in (X)HTML. Then at theend of each property and value, there is always a semi-colon to indicate the end of that property. So agood form of a CSS script is what we have below: P{ color: blue; font-family: verdana; size: 10px; }Background Image propertiesbackground-image: url(../images/file.jpg) (It can be url(../images/file.jpg)no-repeat; if you do not wantyour background image in tiles.)background-repeat: To specify the tiles of the background imagebackground-position:vertical(top, center, bottom, or size) horizontal(left, center, right, or size)background-attachment: (scroll or fixed)Font Propertiesfont-family: sans-serif, trebuchet, helvetica, maiandra;font-style: italic;font-weight: (bold, bolder, lighter, or 100 –900;)font-size: size;font: style weight sizefamily;
    • Text Propertiestext-indent:indents first line of a paragraph according to the size specifiedtext-align:right;or left;or center;or justify;text-decoration: none; underline; overline; blink; line through; (These are the possible values)text-transform:Capitalize;Line-height:added vertical space to each line of text according to sizeList Propertieslist-style-type:none, disc, circle, square,(other types available)list-style-position: inside or outsidelist-style-image:url(../path/to/image.jpg)list-style:type position imageColor Propertiescolor: #ffffff; (You can write hexadecimal values)color: white; (You can write the color names)color: rgb(0, 35, 10); (You can write the RGB color code) Get more color codes from http://www.w3schools.com/css/css_colornames.asp
    • Have you ever come across the 404 error on any website?This means you got yourself lost on the website. You may be getting the website domain name correctlybut the included paths are wrong. Let’s say you tried visiting http://rexcorpcyber.net/games/assasins-creed.html on my website and I don’t have anything like that, you will probably get a 404 error code soyou need to type in a URL path that actually exists on my web server like the home pagehttp://rexcorpcyber.net or the links I may provide in my custom error page.We won’t go into details on this herebut I will show you all the possible status codes youmay come across in HTML includingthe 404 error code. Status Code Meaning Description 100 Continue Confirms the client about the arrival of the first part of the request and informs to continue with the rest of the request or ignore if the request has been fulfilled 101 Switching Protocols Informs the client about the server switching the protocols to that specified in the Upgrade message header field during the current connection. 200 OK Standard response for successful requests 201 Created Request fulfilled and new resource created 202 Accepted Request accepted, but not yet processed 203 Non-Authoritative information Returned meta information was not the definitive set from the origin server. 204 No content Request succeeded without requiring the return of an entity-body 205 Reset content Request succeeded but require resetting of the document view that caused the request 206 Partial content Partial GET request was successful
    • 300 Multiple choices Requested resource has multiple choices at different locations.301 Moved permanently Resource permanently moved to a different URL.302 Found Requested resource was found under a different URL but the client should continue to use the original URL.303 See other Requested response is at a different URL and can be accessed only through a GET command.304 Not modified Resource not modified since the last request.305 Use proxy Requested resource should be accessed through the proxy specified in the location field.306 No longer used Reserved for future use307 Temporary redirect Resource has been moved temporarily to a different URL.400 Bad Request Syntax of the request not understood by the server.401 Not authorized Request requires user authentication402 Payment required Reserved for future use.403 Forbidden Server refuses to fulfill the request.404 Not found Document or file requested by the client was not found.405 Method Not allowed Method specified in the Request-Line was not allowed for the specified resource.406 Not acceptable Resource requested generates response entities that has content characteristics not specified in the accept headers.407 Proxy Authentication Required Request requires the authentication with the proxy.408 Request Timeout Client fails to send a request in the time allowed by the server.409 Conflict Request was unsuccessful due to a conflict in the state of the resource.410 Gone Resource requested is no longer available with no forwarding address411 Length Required Server doesn’t accept the request without a valid Content-Length header field.412 Precondition Failed Precondition specified in the Request- Header field returns false.413 Request Entity too large Request unsuccessful as the request entity is larger than that allowed by the
    • server414 Request URL too long Request unsuccessful as the URL specified is longer than the one, the server is willing to process.415 Unsupported media type Request unsuccessful as the entity of the request is in a format not supported by the requested resource416 Requested range not satisfiable Request included a Range request- header field without any range-specifier value417 Expectation failed Expectation given in the Expect request-header was not fulfilled by the server.422 Unprocessable entity Request well-formed but unable to process because of semantic errors423 Locked Resource accessed was locked424 Failed Dependency Request failed because of the failure of a previous request426 Upgrade required Client should switch to Transport Layer Security500 Internal server error Request unsuccessful because of an unexpected condition encountered by the server.501 Not implemented Request unsuccessful as the server could not support the functionality needed to fulfill the request.502 Bad gateway Server received an invalid response from the upstream server while trying to fulfill the request.503 Service unavailable Request unsuccessful to the server being down or overloaded.504 Gateway timeout Upstream server failed to send a request in the time allowed by the server.505 HTTP version not supported Server does not support the HTTP version specified in the request.
    • To become a web developer, you really need to know what goes on behind the scenes with the websitesyou see all over the internet.When you build your HTML website, you may test iton your web browsers and see that it is okbut it has to be accessible by people on anetwork (mostly internet WAN). Some people build websites for their Local area networks for personalor organizational use but some make their websites to be on wide area networks like our internet sothat anyone in the world will be able to access it easily. Do a research on internet, intranet, and extranet to help you familiarize with the networksThe whole website concept is like our residential home concept. We call it a web site. Consider splittingthis into two and it becomes “web” and “site”. The “web” is the World Wide Web and you can researchon it as well. The “site” is your location on the web like a lot of you refer to your houses location as sites.This is automatically your location on the web. If you are living in a rented apartment or a self-ownedapartment, then in one way or another you must have paid for where you are before you startedresiding in it. This is the same with your site on the web and you need to pay for your tenancy exceptyou have a way you can host your website yourself (don’t think of that at this point cause it is not soeasy to implement). Your house on the internet now is your web server and this is a machine/computerowned by some organizations which are referred to as your web host and may be called landlord withour example here. Your website content is the stuffs you put in your house when you buy/rent one. Scenario: Alex read this book and built a lovely website. He had to put it on the internet for his friends to see what his website is about. Alex decided to go to a good webhosting company like host gator and he bought a space for his website. Now the web host puts Alex’s website contents on their machine but it is not all alone in there because there are some other people that could have also paid host gator web hosting company for a space and their sites could also be hosted on that same machine. Alex can now get a domain name like “myfirstsite.com” either by buying this from his web hosts or getting it before he even meets the web hosts for the website. Alex website can be accessed on the internet now by typing “myfirstsite.com” on the web browser address bar because the web hosting company has server software installed on it like apache, Microsoft IIS or more. The web server serves users with pages of Alex’s websites whenever they request for a web page by typing the URL or clicking any hyperlink on the pages already opened. Now Alex has a website.
    • I said something about Alex having neighbours on the same machine his web host has given him. You can check the neighbor websites by using some special internet features to view all websites hosted on the same IP address with his. I do this most times by visiting -> http://sameip.org Here you can put in the website name “myfirstsite.com” and you will see all the other websites on this server.One more thing I will like you to know about as a website developer/owner is the Domain namingsystem (DNS).Before we get into DNS, we will start off by breaking down a web address which is also known as URL(Uniform Resource Locator). It essentially gives where the web page is, and how you need to talk to it.Let us take a look at this example: http://www.rexcorpcyber.net/offers/free-pizzas.htmlThe first part is "http://", and that tells your PC what protocol (what language so to speak) to use talkingwith this site. In this case, you are using HTTP (Hypertext Transfer Protocol). Another very common onefor web designers to use is "ftp://" which means the “File Transfer Protocol” and it is used to connect toyour webserver and put the web pages you created onto the server.You also see "https://" quite commonly. This simply means that the connection between you and theweb server are being transported over secure socket layers (meaning the information being sent backand forth is encrypted and cannot be easily attacked by hacker’s MITM attacks). You should see"https://" when you (or your customers) are entering credit card information or when you are signing into a social network or any authentication page with your password and username, if the websiteprovides SSL certificates.The next part, "rexcorpcyber.net" is called the domain name. The "www" used to be more significantthan it is today. Today, the "www" is seldom used by most internet surfers, and you can get to the samepage regardless of whether or not you type in "www" your browser or not.
    • The part "/offers/free-pizzaas.html " tells the web server to look in the directory called "/offers/" whichis a directory in my root folder then send the file called " free-pizzas.html " to your browser. It is just likethe directories on your PC. We can also call this our permalink and the way your permalinks displaysvaries on your website configuration. You can use a permalink that displays your web page folderdirectories, the ones that use page ID numbers, or more depending on the scripting language used tocode your website.Before we get into DNS, we need to explain what an IP address is. When a computer is on a network, itusually gets an IP address to identify it on the network. The network could be a LAN or WAN. In thiscase, we will discuss on the internet which is a WAN network. IP addresses usually have a format of 4separated by periods, and looks like "127.0.0.1". Although that’s a loopback address and it is not meantfor any website besides your local host. Each number (decimals) should be between 0 and 255.Think of it as your phone number on the network (internet). It would be bad to have 2 different houseswith the same phone number, and it would be bad to have 2 different machines (more property knownas hosts) that have the same IP address on the Internet.For most people, it is much easier to remember "www.rexcorpcyber.net" than it is to remember"127.0.0.1". When you enter a URL into your browser, you usually use the easy to remember name.How does your PC know where to find "www.rexcorpcyber.net"? Remember that each machine has anIP address? There is a way to translate from the easy to remember domain name, and the hard toremember IP address.This is where DNS comes in. Its objective is to translate between the friendly “www.rexcorpcyber.net”and the not-so-friendly “127.0.0.1”. It handles this translation for websites, email, FTP servers, databaseservers, or any machine within a domain name.Lets dig into the process of how that works. Here I will use an example a boy named Alex again [I keepusing Alex, maybe I will name my first child Alex…lol]. Let us assume that Alex types"www.rexcorpcyber.net" into his web browser. How does his PC find the web server that has the pagehes looking for, among the thousands of web servers?1. Alex types in “www.rexcorpcyber.net”to his browser.2. Alexs PC looks at its configuration. It will find something called "DNS Server" or "name server"and there will be an IP address associated with that. Lets say it is “198.6.1.1”. Alexs PC sends a messageto “198.6.1.1” and asks "I am looking for the IP address of “www.rexcorpcyber.net”, can you tell mewhat it is?3. The DNS Server (198.6.1.1) gets the message, and assuming that the server already knows whatthe IP address of www.rexcorpcyber.net is, it tells Alexs PC that the IP address is 127.0.0.1 . I will getinto considerable more depth about the DNS server, how it works, and why it is important to a websiteowner, a little later. To try this, open your command prompt and type “ping localhost” and you will get127.0.0.1 just like you can do for any website by typing “ping mysite.com”.
    • 4. Alexs PC gets the message that the IP address of www.rexcorpcyber.net is 127.0.0.1. So his PCsends a message to 127.0.0.1 and asks "send me the home page at 127.0.0.1".5. The web server (whose IP address is 127.0.0.1) sends the web page to your browser. That is asimplistic example of how your PC finds a particular web-server and web page. The process of matchinga domain name to an IP address is called RESOLVING. So your PC resolves the IP address from thedomain name. Lets get into a little more detail.For step 1, how does Alexs PC know what the IP address of the DNS Server is?There are 2 ways it learns what the address is. The first is that Alex asked his ISP what the address was,and entered it himself. There are times manually entering (also known as statically entering) the addressis necessary or desirable, but usually the ISP automatically tells your PC what the IP address of the DNSserver is.This process is called "DHCP" or Dynamic Host Configuration Protocol. When you select "Obtain IPaddress automatically" in your windows Network connections page, you are telling your PC to use DHCPand to ask the ISP to give you the DNS Server address (among a bunch of other things).In step 3, we assumed that the DNS server already knew what the IP address of www.rexcorpcyber.netwas. What if it didnt already know?
    • Lets assume that the DNS server for Alexs PC sent a request to resolve the IP address ofwww.rexcorpcyber.net but it doesn’t know what it is.I believe you should have come across the variations of the end of the domain name? There are usually:“ .com, .in, .mil, .gov, .net, .org, .us, .biz, and all others”.When a DNS server receives a request to resolve an IP address (translate from a domain name to an IPaddress) for a domain that it doesnt know the answer to, it sends a message to any one of a smallnumber of servers. Those small numbers of servers are responsible for knowing what the "authoritativeserver" is for every domain name. A realm would be a “.com, or .org” for example, and is usually called atop-level domain.What is an authoritative server?An authoritative server is a DNS server that has a Statement of Authority configured for a particulardomain name. That means that the server has absolute and total knowledge of the domain, anyinformation that contradicts the information that the server has is wrong, it is the final word.This becomes more important a little later. I wouldn’t talk about the backup authoritative servers now.The message that Alexs DNS server sends to the top-level domain server "what is the authoritativeserver for rexcorpcyber.net?". It is important to understand, that Alexs DNS Server is NOT asking "whatis the IP address of the web server for rexcorpcyber?". It is only asking "where do I go to find out wherethe web server for rexcorpcyber.net is?"Once Alexs DNS server knows where to go to get the answer for Alexs request, it sends a message tothe authoritative server asking "what is the IP address of the web server for rexcorpcyber.net?". Theauthoritative server responds, and Alexs DNS Server tells Alexs PC the IP address it needs to connectAlex to the webpage he is looking for.To summarize the past few paragraphs, Alexs DNS server receives a request for an IP address that itdoesnt know. That server makes a request of a top-level domain server, and gets a response with whereto go to get the information that Alex is requesting. The DNS server then makes a request of theauthoritative server, and forwards the answer it receives to the PC that made the first request.It sounds long and complex, but it happens very quickly. One way to speed up the process is calledcaching. Caching is where the DNS server remembers the response from the authoritative server for aperiod of time. So if someone else makes the same request 5 minutes after Alex did, the DNS serverdoesnt have to repeat the whole process. Caching will be brought up again in a bit.So we learned how your PC finds out where it needs to go to get to specific web page. So what?What does that have to do with web site owners? Lets explore.
    • Youre a website owner, you just got your site made (or had it made). Now you want to register adomain name. What does that mean?When you register a domain name, you need to talk to a "registrar". You tell the registrar someinformation about you, and they ask for a "name server", or "DNS Server" when you register thedomain. The exact term used will vary, but they all mean the same thing - what are the IP addresses forthe authoritative servers for your domain? These would generally be the DNS servers of your web host.They will ask for at least 2, sometimes up to 4, but 2 are all that are absolutely needed. Those after thefirst are used if the first one is down.For the sake of simplicity, that registrar is responsible for telling the top-level domain servers the answerto the question that Alexs DNS server asked "what is the authoritative server for rexcorpcyber.net?".There are numerous companies that register domain names, and many web designers and web hostingcompanies have a process to help make this easy for you.What happens if you picked a web host that is the worst company on the face of the planet, or you haveoutgrown what the web host is capable of providing, or maybe even you decide to host your ownwebsite as I talked about earlier in this book.The first thing you need to do is plan. The basic process would be that you sign up with a new web host,put a copy of your site on the new web host, and make sure everything is working, sometimes there willbe glitches. Once everything is working, then you have the registrar tell the top-level domain serversthat the new authoritative servers are at the new web host. So from then on, whenever someone wantsto see your webpage, his DNS server is told by the top-level domain server that the authoritative serveris at the new web host, and they in turn point to your new web page.Now, I said to plan. There is a reason for that besides just making sure everything works. Rememberwhen I said that "caching" would come up again? Now is that time. Remember that Alexs DNS servercached the address for the web server of: www.rexcorpcyber.netMeaning that it remembers that www.rexcorpcyber.net has the IP address of 127.0.0.1. Most DNSservers are set to remember that information for 24 hours. So if Alex requests your web page at noon onMonday, Alexs DNS server will cache the IP address of your web server until noon on Tuesday. If youchange hosts at 1pm on Monday, Alex will get your old website until at least noon on Tuesday. His DNSserver is giving his PC the information it remembers, it doesnt check to see if that is still accurate. So, ifyour old website is down (maybe your shopping cart wont work now that you have moved hosts, forexample), Alex cant get to your new website, until his DNS server refreshes the information (which willpoint to the new web site). Well! You can still fix this from the command prompt by using“ipconfig/flushdns”.Plan on a timeframe of 24-48 hours from the time your registrar makes the change in the top-leveldomain server, before that change is spread through the Internet. So what does this mean for yourplanning? If your site is generally used by businesses, your site wont be very busy over the weekend.
    • Therefore, plan on making the change on a Friday evening, by the time Monday rolls around, all the DNSserver caches have been cleaned out (timed out actually), the DNS servers will have to ask the top-leveldomain servers, and your new website will be accessible to those people who couldn’t use thecommand prompt instruction to refresh their DNS as I have shown here.So we know what DNS is, what it does for us, and a basic idea of how it works. We know what a registrardoes, and why we need them, and what an authoritative server does for us. We know why some peoplemay not be able to access our new site 5 minutes after we changed hosts. Scenario: A customer just called and said my site is down. I call my web host, and they say its up. I call the customer and they still cant get on.Now what?Troubleshooting.To troubleshoot DNS problems, visit the websites below: www.dnsstuff.com/ www.kloth.net/services/nslookup.php.If you try your domain namehttp://www.rexcorpcyber.net/offers/free-pizzas.htmland it is not opening your newly migrated website on a new server, then tryhttp:// 127.0.0.1/offers/free-pizzas.htmlWhere” 127.0.0.1” is the IP address of your web server. If you can get to your site using the IP address,but not using the domain name, the problem is DNS, it is not your web server.Last thing, sub-domains. A subdomain can be used, for example, if you have both wholesale and retailfor your business. You could have the retail part of your business as www.yourdomain.com, and thewholesale as wholesale.yourdomain.com. Details are beyond the scope of this tutorial, but the samegeneral rules apply to subdomains as it does to domains.
    • SEO is something you will come across several times as a web developer and you may need to practice itas well in order to be the best web developer your clients are looking for. Search engine optimizationhas to do with the way your website is found on search engines. This may sound totally weird to thosewho do not have an idea on this before but you need to understand that when you search for items orstring of words on a search engine expecting an answer, the programmed search engine crawlers willcrawl several web pages to find related strings in order to give you the answer or solution you mayneed. These web crawlers search for websites according to their ranks and their contents. Each websitehas rank. You simply don’t expect a website like Wikipedia.com to be ranked the same as a simplewebsite you just built. This is why you may have a website on “Peanut butter” and then you make aGoogle search hoping to see your website listed to display results on “Peanut butter” but instead, youget the description from Wikipedia as a first result. You can optimize your website to be among the topwebsites to be found when someone wants to gather some information about “Peanut butter” but thebig question isMETA-TAGSMeta tags are tags that show the metadata of our web files. Metadata means data about data and sinceour web files could be referred to as data, the Meta tags tells us more about the web files and it has away of attracting the web crawlers to our web pages depending on how we used it.Meta tags are placed in the head element of our HTML page like we have below<meta name="keywords" content="your keywords" /> is simply prompting the web crawlers that ifanyone makes a search on these words, you can find them here.<meta name="description" content="your description" /> is the way you want your website to bedescribed in the search engine results.<meta name="generator" content="REXCORPCYBER web design training" /><meta name="author" content="Joseph Rex" /><meta name="robots" content="index, follow" />
    • <meta name="revisit-after" content="7 days" /> This tells the website crawlers/robots to check yourwebsite for new updates every 7 days and you must ensure you make your titles clearly written inheading tags for it to take note of them.<meta name="alexia" content="100" /> As the web developer, you will need to install the alexia add-onin your browser to use this properly and what it does is to ping alexia regularly to increase your siterank.BacklinksThese are links to your website on other websites. The more hit you get into your website, the moreyour optimization rank. If I have a website and I want to boost my SEO, I can have my other friends withwebsites put links to my website maybe as partners or just suggestions for their own site visitors and Iwill also return the favour most times by having theirs as well. You can meet a lot of website owners inforums, social networks, and more to share backlinks with them. Another way to have a backlink of yourwebsite in other websites is by making comments on those websites. You find out most websites thataccept comment also allows you put down your website. If you encounter websites that denies you thatprivilege, you can include your website URL as a comment on the websiteAlexia Site RankingIn website SEO, Alexia is a really respected website, a place for you to stay updated with your websiterankings, and also check rankings for any other website. There are some opportunities alexia offers youto build your website SEO. You can check out http://alexia.comRESTRICTING THE SEARCH ENGINE WEB CRAWLERSSome of you may choose not to use SEO because you do not want search engines to crawl around somecontents in your web directories. You shouldn’t throw the whole sandwich away simply because youcannot take the onion. The best thing to do in this case is to use a robots.txt file.It is a simple text file that should be stored in the root directory of your website. It should be on thedirectory with your homepage/index page. In most cases, it is called the WWW folder. It is used torestrict search engines from browsing through some of the folders/directories on our server.HOW IT WORKSJust create a text file with the name robots.txt and then fill it up with something like# A robots.txt fileUser-agent: *Disallow: /administrator/
    • Disallow: /cli/Disallow: /logs/The part with the pound sign “# A robots.txt file” is a comment, “User-agent” allows you to specify anyweb crawlers you may know and prevent them from crawling your web pages. If you cannot specify anybut you want the pages off from every search engine web crawler then you can use the wildcard “*”which refers to all web crawlers. Lastly the “Disallow” allows you to specify the directories that you donot want the web crawlers to crawl. As you can see from my example, most times we don’t want ouradministrator files to be seen and the other listed folders are important folders that should not be seenby others gathering information from your website.There is a lot more to know about SEO. This is just an overview!!!REFERENCEShttp://w3schools.comhttp://htmlhelp.com