Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Beginner's HTML guide part 1 (of many)

  1. #1
    Join Date
    Sep 2012
    Posts
    16

    Beginner's HTML guide part 1 (of many)

    In this guide, we will cover the very basics of HTML. HTML stands for Hyper Text Markup Language, and is what every browser sees. It lays the foundation for the web pages that you view. HTML is completely open source, as you can right click > view source on any web page (unless bound by javascript to not allow right clicks, in which case there are bypasses for that as well. Still open source)

    Now let's begin: We will start off with the DOCTYPE, which is the declaration that the browser uses to determine which version of HTML to render for. The most recent is HTML5, which is not a "new" version, but an upgrade of the older HTML 4.01. What this means is that HTML 4.01 will work within an HTML 5 DOCTYPE, but HTML 5 will not work with the HTML 4.01 DOCTYPE. So let's use the HTML 5 DOCTYPE so we can have full support


    Code:
    <!DOCTYPE html>
    Now we have our DOCTYPE (This goes at the top of every HTML document) and we can move on to the foundation of the page.

    Code:
    <!DOCTYPE html>
        <html lang="en">
            <head>
                <title>Page Title</title>
            </head>
    
            <body>
                  <!-- This is a comment in HTML, it is completely ignored by the browser (Except when you view source) -->
            </body>
        </html>
    Let me break this down real quick. This is the entirety of your web page. The html tag (the stuff between the angled brackets are called tags for future references) tells the browser "it's html, let's render it as such". Every tag has a closing tag, and if you notice the closing tag for html is at the end of the page, as our entire document is wrapped within it. This tells the browser to start rendering that tag, and then to stop when it reaches the closing tag. (This applies to all tags.) Then we have our head, which is the area in which we include our page's information, which remains hidden from the user, but not the browser. In this area, you would link your javascript codes, stylesheets, meta-data (all of this I will explain at a later time) and even include your page's title (what's viewed on the top of the browser or on your tabs)

    Now we move onto the body, which is what the user views. Everything in between those tags will be rendered as the "body" or "content" of your HTML document. Again, this is what you see on every web page: the body.

    Let's get into a couple basic tags:

    Code:
    <!DOCTYPE html>
        <html lang="en">
            <head>
                <title>Page Title</title>
            </head>
    
            <body>
                  <p>This is called a paragraph tag</p> <!--Browser will render this as a paragraph instead of a random block of text-->
                  <b>This text will be bold-faced</b> <!--This is the "bold" tag, which makes your text look like this-->
                  <i>This text will be italics</i> <!--The italics tag, which makes text look like this-->
            </body>
        </html>
    Take note that all of my tags are lowercase. This is best practice, as some tags can be partially rendered using capitalization, but all tags are rendered lowercase. Use lowercase at all times to prevent any errors in your document. HTML documents are ended with .html or .htm (best practice to use .html) and can be created from Notepad I'm slightly tired so I didn't wanna get too deep into this right now, but I will be posting more for sure.

  2. #2
    Join Date
    Aug 2012
    Location
    Erie, PA
    Posts
    689
    Very nice.
    Take note people that this is the very basics of making a website. But it's the first step indeed.

  3. #3
    HTML is like 1988
    I'm really interested in learning ruby tho

  4. #4
    Join Date
    Aug 2012
    Location
    The Netherlands, Europe
    Posts
    545
    Even I understood this, which makes this a really good tutorial!

  5. #5
    NOPROBLEM Guest
    Dreamweaver

  6. #6
    FireWorks

  7. #7
    Join Date
    Sep 2012
    Posts
    16
    Quote Originally Posted by Wesley View Post
    Very nice.
    Take note people that this is the very basics of making a website. But it's the first step indeed.
    Wesley is 100% correct. This is the VERY basics of making a website. The actual styling comes from CSS, and the interactions come from CSS/Javascript/php/ruby/python etc etc. I will be making a series of guides for both HTML and CSS, as I'm still learning PHP/Javascript in some aspects (Don't know it all yet :P)

  8. #8
    Join Date
    Aug 2012
    Location
    Erie, PA
    Posts
    689
    Oh man. Wait till you get into some complex PHP shit like I do. For example from the DRGunZ Website:
    Code:
    					<!-- Login Start -->
    					<div id="login">
    						<table style="position:relative; left:12px; top:11px; width:90%;">
    							<tr><td width="220" height="15" class="tbl_title"><?php echo $title['1']; ?></td></tr>
    							<?php if($_SESSION['user'] == ""){ ?>
    								<tr><td height="140px" valign="top" style="font-size:11px; padding-top:5px;">
    								<form action="index.php?act=login" method="post">
    									<?php echo $logpanel['1']; ?> <input type="text" name="userid" maxlength="15" class="logbbg" />
    									<input type="submit" name="login" value="" class="login_button" />
    									<?php echo $logpanel['2']; ?> <input type="password" name="password" maxlength="20" class="logbbg" /> <br />
    								</form>
    								<div id="loginf">
    									<div style="padding-top:7px; font-size:10px;"><?php echo $logpanel['3']; ?> <a href="index.php?act=register"><?php echo $logpanel['5']; ?></a></div>
    									<div style="padding-top:5px; font-size:10px;"><?php echo $logpanel['4']; ?> <a href="index.php?act=forgottenpassword"><?php echo $logpanel['6']; ?></a></div>
    								</div>
    								</td></tr>
    							<?php }else{ ?>
    								<!-- Logged in Start -->
    								<tr><td class="loggeduser"><?php echo $logpanel['7'].' '.$_SESSION['user']; ?> <a href="index.php?act=logout"><?php echo $logpanel['8']; ?></a></td></tr>
    								<tr><td></td></tr><tr><td></td></tr>
    								<?php
    									$sqlloged = "SELECT Name, AID, Tokens, Rebirths FROM Account WHERE UserID='".$_SESSION['user']."'";
    									$logquer = odbc_exec($connect, $sqlloged);
    									$logaid = odbc_fetch_array($logquer);
    									echo '<tr><td class="logged_dline"><span class="logdu">'.$loinup['1'].' :</span> '.$logaid['Name'].'</td></tr>';
    									// Get the CID's.
    									$clancid = odbc_exec($connect, "SELECT CID FROM Character WHERE AID = '" . $logaid['AID'] . "'");	
    										// Check if there are any results.
    										if(num_rows($clancid) > 0)
    										{
    											// Loop through the results and create a CSV in $cids.
    											$cids = '';
    											while($row = odbc_fetch_array($clancid))
    											{
    												$cids .= $row['CID'] . ',';
    											}
    											// Get Clan Name and CLID where CID is from the last query.
    											$clanclid = odbc_exec($connect, "SELECT a.Name, b.CLID FROM Clan a INNER JOIN ClanMember b ON a.CLID = b.CLID WHERE b.CID IN(" . substr($cids, 0, -1) . ")");
    											// Check if there are any results.
    											if(num_rows($clanclid) > 0)
    											{
    												// Loop through the results.
    												echo '<tr><td class="logged_dline"><span class="logdu">' . $loinup['6'] . ' :</span>';
    								?>
    												<select name="jumpMenu" class="tbl_colbor" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
    												<option value="">Select your clan</option>
    								<?
    												while($row = odbc_fetch_array($clanclid))
    												{
    													// Use the results.
    													echo '<option value="index.php?act=clanmanage&amp;CLID=' . $row['CLID'] . '">' . $row['Name'] . '</option>';
    												}
    								?>
    												</select>
    								<?
    												echo '</td></tr>';
    											}
    											// If there are no results.
    											else
    											{
    												echo '<tr><td class="logged_dline"><span class="logdu">'.$loinup['6'].' :</span> You are not in any clan(s)!</td></tr>';
    											}
    										}
    										// If there are no results.
    										else
    										{
    											echo '<tr><td class="logged_dline"><span class="logdu">'.$loinup['6'].' :</span> You have no characters!</td></tr>';
    										}
    										echo '<tr><td class="logged_dline"><span class="logdu">'.$loinup['5'].' :</span> '.$logaid['Rebirths'].'</td></tr>';
    										echo '<tr><td class="logged_dline"><span class="logdu">'.$loinup['3'].' :</span> ';
    										if($logaid['Tokens'] == ""){
    											echo "0";
    										}else{
    											echo $logaid['Tokens'];
    										}
    										echo '</td></tr>';
    								?>
    								<tr><td></td></tr><tr><td></td></tr>
    								<tr><td class="logged_links">
    									<ul>
    										<?php if($_SESSION['UGradeID'] == 255){ ?>
    											<li><a href="index.php?act=admin" class="admin_button"></a></li>
    										<?php }if($_SESSION['UGradeID'] == 254){ ?>
    											<li><a href="index.php?act=gm" class="gm_button"></a></li>
    										<?php } ?>
    										<li><a href="index.php?act=userpanel" class="user_button"></a></li>
    									</ul>
    								</td></tr>
    								<!-- Logged in End -->
    							<?php } ?>
    Just a small bit of code.

  9. #9
    Join Date
    Sep 2012
    Posts
    16
    Yeah, I'm in the process of learning PHP. I made a comment system (though not in real-time) using mySQL and PHP. It works pretty well. Trying to make it in real-time.

  10. #10
    Join Date
    Aug 2012
    Location
    Houston
    Posts
    769
    yo, teach me some javascript homie

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •