Showing posts with label Codes. Show all posts
Showing posts with label Codes. Show all posts

Monday, 11 August 2014

Mark up Structures

The point of mark up structures is to create an easy template to work with and be easy to set out the tags
Generally websites have a structure like this
Header this is usually at the top, this contains the title of the page and logo, this is to let people know what the website is about and who own it.
navigation bar that goes across the page or down the side, it can also be part of the header this lets people go to each page that is linked to the bar
Main content column which generally contains the main content of the page.
side bars that have content that is generally relative to the content on the page.
Footer it goes across the bottom of the page and has information like copyright, contact details, links on the site.
like this for example
This website can be broken into 6 different parts all which will be divided into there own section with the
tag

The 6 different sections are the header, navigation menu, main content, two different sidebars and the footer, when we highlight each part of the website we can see each part and the space it takes up
 
This makes it simple to understand how many different sections you need for the website.
Our task to practice laying out mark up structures with the example website.

Wednesday, 6 August 2014

Blog set up

Blogging Set-up
I wanted to have a navigation bar to link each of my blogs on blogger together so I can keep posts organized, I created my own navigation bar, deciding on doing 5 blogs
1 Sarah's Design Co.
2 Collaborative Projects
3 Web Design
4 New Media
5 Studio Practice
In the navigation each one links to the blog associated with the title,
I found a basic template and copied this and added my own font colour and size, links, titles and highlighted text, this was a lot of trial and error, once I got the main part perfect I copied the whole HTML and pasted it in each of my blogs HTML editors
<div id='navigation'>
<a href='http://sarahsartandesign.blogspot.co.nz/'> <font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'> HOME</font> </a>
<a href='http://collabprojectsbysarah.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'>COLLABORATIVE PROJECTS</font></a>
<a href='http://webmediabysarahbishop.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'>WEB MEDIA</font></a>
<a href='http://newmediabysarah.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'> NEW MEDIA</font></a>
<a href='http://studiopracbysarah.blogspot.co.nz/'><font color='#FFFFFF' size='4' style='BACKGROUND-COLOR:#900000'>STUDIO PRACTICE</font></a>
</div>
Use this if you want to but just change the links and names and colours etc
I decided on using word press because it's a lot more professional than blogger, once i got the hang of it.

HTML intro

HTML Intro
HTML the code that all websites are written in. the code must have a start and an end for example
<p> This is my paragraph </p>
The letters in the brackets are the "mark ups" this one is using p which is to create a paragraph with the text in the middle
Creating my first HTML Website
The tags we learned
<p>paragraph tag</p>

<h1,2,3,4> each number gets smaller and smaller
< a href="www.facebook.com">this is a link to Facebook</a>
<strong>this text will be bold</strong>
<em>this text will be italic</em>
<img src="where the image is found" alt="alternative if image can't load" title="name of image" />
I Also found out how to change the background colour and put a line under the title
In the body tag
<body bgcolor=00000>
and the line under the title
<hr width=noshade size=3 color=black>
Code for First HTML website
Screen shot of website running

Week 2 in action
My website with given text running
Week 2 Code
HTML for the running website above
first webpage open
My first Website running

HTML for website above
HTML for website above