| « Visit VITA for Free Tax Preparation | I'm sorry » |
Seven Languages of the Web
From: 12/30/2007
I was at a Mensa gathering a couple months ago and a couple of people there were talking about their web pages. These were smart people, but they didn't know much about the way today's web works. This is a simple guide to understanding the structure of a web page.
Creating a web page can be easy for a simple page. I started a decade ago designing these simple web pages. All you need is a text editor and a knowledge of 10-20 html tags. Today, however, if you want to create more complex pages, you may need to work with seven or more languages. You may not have to be fluent, but you will need to know which language you need to use and where. The first step in learning how to write is learning how to read.
In some cases you can, and many probably do, work through an interface, such as an integrated development environment (IDE), and not have to worry about some of the languages, but they always seem to leave something to be desired. In either case, you might do well to understand what is happening on a web page to know better how to create your own.
The first language in web design is html. The "Hyper Text Markup Language" is what defines the structure of the document. It starts by defining where the page starts. <HTML> begins the page, and </HTML> ends the page, or so that's how it should be done. Between those "tags", there can be many other tags, in succession or nested, such as <HEAD>, <BODY>, <FONT>, <STRONG>, <EMPH>. Some tags divided up the page, while others defined how to present certain information. Ideally, they should not be overlapping, that is, an internal tag should be closed before its containing tag should be closed.
<b>bold <i>italic<i><b>
In the beginning, it was up to the browser to interpret and present things like bold and italics, or how to show a table. Different browsers did different things. That was cool then, but there were those that wanted to define specifics about how things were presented, the fonts to be used, and exactly where things were to be placed. That's when "Cascading Style Sheets" were born.
CSS is integrated with HTML, and uses the tag system (where elements start with < and end with >), but its syntax is quite different. In the middle of an HTML tag you can define specifics.
For example, style="padding-top:1em" class="wall2wall", says there should be 1 em of padding at the top of whatever element this is in, and that it uses the class wall2wall. In this case, wall2wall is a style found in an external stylesheet, although that file could have dozens of other styles. In that stylesheet we find that the definition of a wall2wall style specifies that the element have left and right margins of 0 pixels.
.wall2wall {
margin-left: 0px;
margin-right: 0px;
}
There is also inheritance to consider. If this tag is nested inside another tag with specifications, those are applied before these.
The third language in web pages are scripts, primarily javascript. These are sections of programming code on the page that calculate various things. It is commonly used to load the images that show when you move your mouse over a section of the text. They can be written in-line, like
<script>var ldimg_masthead = new Image();
ldimg_masthead.src = "http://us.js2.yimg.com/us.yimg.com/i/us/sch/el/att_hdspr_1.6t.png";
or they can be a reference to an external file.
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/s3/ysch_srp_clean_200711091653.js"></script>
You can view examples of these three by viewing a page in your browser and then selecting to View Source. This is a handy tool for those that know how to read/interpret code. If what you see, however, is meaningless, it may be because it was written by the engine in some IDE. There may be tags with nothing inside them and different types of garbage. The code written by Front Page is one example of bloated web page code. Pages that are hand- written, or hand-edited are generally much cleaner and easier to read.
The fourth language, php, is not something you can view from a browser. It is a programming language like javascript, except that all php code is interpreted by the server and eliminated before the page is sent to the user. All php code in enveloped in a pair of tags that identifies the content as php code.
For example, in the code
<?php
echo 'Hello World!';
?>
the host system essentially stops processing html tags when it sees <?php, and hands it over to the php processor. The page is then handed back over to the html processor when the tag is closed with ?>
Primarily, php takes information from the host system and presents it to the user in a format that the user can use. In many cases, php is used to access and display records from a database. In reality, it takes more than php to access a database. php only processes the "information" from a database. There is another language that actually accesses the database, and php uses that language within its code.
That would be language number five in the list, SQL. SQL stands for standard query language and was initially developed to standardize database queries. There are still minor differences in SQL based on the server being used. Microsoft SQL Server is the big-name server while the most popular one on the web is MySQL. php uses SQL to get information from the database, and store it in memory until it needs to use it.
In the following code at the beginning on a web page, php gets a list of categories and stores them in an array. Later in the page, it lists those categories in a list box for the user to select from. The SQL in the code is
"SELECT Categories.CategoryID, Categories.Category FROM Categories ORDER BY Categories.Category"
<?php
mysql_select_db($db, $db2);
$query_Category = "SELECT Categories.CategoryID, Categories.Category FROM Categories ORDER BY Categories.Category";
$Category = mysql_query($query_Category, $db2) or die(mysql_error());
$row_Category = mysql_fetch_assoc($Category);
$totalRows_Category = mysql_num_rows($Category);
?>
Later, the page will display content from the query
<select name="category">
<option value=""></option>
<?php
do {
?>
<option value="<?php echo $row_Category['Category']?>"><?php echo $row_Category['Category']?></option>
<?php
} while ($row_Category = mysql_fetch_assoc($Category));
$rows = mysql_num_rows($Category);
if($rows > 0) {
mysql_data_seek($Category, 0);
$row_Category = mysql_fetch_assoc($Category);
}
?>
</select><br />
When you view the source in a browser it looks like this.
<select name="category">
<option value=""></option>
<option value="Accounting">Accounting</option>
<option value="Advertising & Marketing">Advertising & Marketing</option>
...
<option value="Transportation">Transportation</option>
<option value="Web Designer">Web Designer</option>
</select><br />
You can see it in action at http://www.tylerwebsites.com/advanced.php
The sixth language may not be a necessity, but I always find a use for it. That language is perl.
Instead of it being processed as part of a web page, a perl script is executed on the server like any other program. The output from a perl script can then create and send a web page to the user. Unless something has gone terribly wrong, you can't see the code in a perl program. Only the server reads the program and then acts on it. Perl is very cryptic, but it is fast. Here's a snippet.
my($wordCount, $score);
if ($line =~ /^(\S+) /) {
$filename = $1;
} else {
next;
}
for $w (@words) {
if ($line =~ /(\d+):$w/)
There you have it, HTML, css, javascript, php, sql, perl, and of course, English. The English text may be all that you or your users will see when they visit a web page.
Web design is not that difficult, if you realize that you are often dealing with several languages woven together in a single file. Once you take it apart, and can see where the connections are, you can figure out how to rebuild it to suit your needs. Start with the basics and build from there. Build with html first, add some css where desired, then search the web to find ways to use the other languages to enhance it.
This entry was posted on January 30th, 2013 at 10:29:00 pm by Dana Bell and is filed under Information Technology, Computing, Professional.
