Web Design

HTML code is just text that has no power to do anything on its own. Browsers, like Googles Chrome, Mozilla’s Firefox, Windows Explorer, ext. are programs designed to read text and with a specific logic, interprets that text as HTML code to display it for the user. You can find the latest and greatest browsers at Browse Happy. The first thing a browser looks for in your text is the HTML tag. This lets your browser know to look for code that it may recognize between your opening HTML tag (<html>) and your closing HTML tag (</html>). The next thing your Browser looks for is a Head tag and a Body tag within your HTML Tags. Everything in your Head is information that your browser will use and anything in your Body is what your users will see. One thing to be aware of when programing a website, is that your browser follow a specific chain of logic when trying to decipher your HTML code and if there are any breaks in that chain, weather it’s caused by spelling, the wrong number of tags, wrong use of brackets, bad spacing, and so on and so forth. So code carefully.

One thing to keep in mind while making any website is that browsers and search engines read tags in your HTML code and assigns them a value depending on what tags you are using. Using the appropriate tags for the proper content will make your site easier to find. For example, Article and Aside (sidebar) tags all register on google and other search engines. Some of these tags like the Strong tag will give priority to certain text while altering the appearance to make to text bold, while others like Section will simply act like a Div (divide) tag with no esthetic difference.

To make your site easier to search, known as SERP (Search Engine Result Page)

  • Title tags in your Head contain the tittle/link to your website that will show up on search pages and on top of browsers.
  • Meta tags contain relevant information for browser and the content that will show up bellow your tittle on search engines and some types of meta tags you could use include description, keywords, viewport, ext.
    Examples: <meta name=”description” content=”This cheesy site is about cheese.”>
    <meta name=”keywords” content=”Cheese, Cheesy”>

During my second week at Humber, we learned 3 different methods of designing a website. The three methods are include Inline (coding HTML directly in each tag individual), Embedded (defining your tags in the head of the document in CSS to apply the style to the entire page), and linking an external CSS document. Before starting any design work, first we need to program the contents of our page in HTML so that we have something to style. To do this we need to create the HTML tags, then the Head and the Body of the page.

Web_01
Dreamweaver has a feature where selecting a tag anywhere will highlight the opening and closing for that specific tag in the code view.

Now that we have the basic skeleton structure of our web page, we can add some color and begin to style this empty page with one of these tree methods:

  1. Inline:
    Using HTML you can coding your design directly in each tag but this method is the most limiting and requires more time to load then the other two options. It also requires you to code in the design perimeters for each HTML tag in the Body section of each page individual and any design edits must also be entered in each tag manually.Web_02
  2. Embedded:
    Applying CSS in the Head of the HTML document allows you to design the entire page all at once. All you need to embed the CSS into your HTML on the page, you just have to enter <style></style> tags. But when applying the same style across an entire website requires you to re-write out the entire section of CSS code into every single page on your site.

    Web_03
    Positive CSS values push your content towards the left and/or bottom while negative values push your content towards the top and/or right.
  3. External:
    Linking an external CSS document to your HTML code is the best method of styling a web page since it loads faster then the previous two methods and it allows you to edit everything on the entire website from one location. Then all you have to do is link the two documents by writing out a single line of code in the Head of each page that you want to implement that same style.

    Web_04A
    <!–comment–> to comment in HTML and /*comment*/ to comment in CSS

When coding in CSS, you can ether define your tags individual or you can define pairs of tags together at the same by separating them with commas, like body, a, nav, h1, h2 {}for example. You can also define Pseudo-tags (the different states of your tags) with a colon like, a:hover or a:visted for example. And there are essentially three types of tags to be aware of:

  1. Preexisting tags like header, strong, footer etc. will have preset design perimeters that you can ether utilize to your advantage or simply redefine them by entering them just as they are.
  2. Id tags are unique tags that you define by writing # before the tag like #containerand these can only be used once each in your HTML code.
  3. Class tags are also unique tags defined with a period before the tag like .headingor “.content for example. These can be used multiple times throughout your HTML document.

When to designing your site in CSS, it is common practice to change your type first. I changed my text to Arial with body {font-family:Arial, Helvetica, sans serif;} and I centered my heading by stylizing the h1 tag with h1 {text-align:center}  I removed the underlines in the navigation (nav) bar, by coding in a {text-decoration:none;} for a sleeker look.Web_04B.jpgI wanna create a border with curved corners by writing border:radius:20px; in CSS for the “#container tag, to fit my cheese theme. Once you have defined a width for your container (width:960px;) you can center it with margin-left:auto; and margin-right:auto or just margin:0 auto 0 auto; for a short form. When entering short form code, the values you enter always follow a specific order that is top/right/bottom/left. When making your code even shorter like margin:0 auto; for example, first value will apply to the top/bottom and the second will apply to left/right. Then I created a dashed border around my image  with img {border:5px dashed #000;}and made a black background for my title with h1 {background-color:#000;} tag to create the webpage bellow.Web_05

There are plenty of HTML and CSS resources online for other tags you may need, then you can figure out how to stylize something specific for your site by visiting a CSS generator website.

Advertisements

2 Comments Add yours

  1. tuirablog says:

    omg Gordan, now I get it! Very well explained, very clear, and combined with the photos, this was so helpful. Thanks

    Liked by 1 person

  2. iteachai says:

    Awesome job Gordon. Great to see you’re enjoying web.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s