Scribd Logo
Upload

Welcome to Scribd!

  • How To Create Your Own Website #2

    Uploaded by

    Ekin Hazal Bayar
    96 views8 pages
    This is the second article of ”How to Create Your Own Website” tutorial. Each day you will learn how to make a website with latest web standards by following simple step by step instructions. Let’s get started!

    Original Title

    How to Create Your Own Website #2

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This is the second article of ”How to Create Your Own Website” tutorial. Each day you will learn how to make a website with latest web standards by following simple step by step instructions. Let’s get started!

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    96 views8 pages

    How To Create Your Own Website #2

    Uploaded by

    Ekin Hazal Bayar
    This is the second article of ”How to Create Your Own Website” tutorial. Each day you will learn how to make a website with latest web standards by following simple step by step instructions. Let’s get started!

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    This is the second article of How to Create Your Own Website tutorial.

    Each day you will learn how to make a website with latest web standards by following simple step by step instructions. et!s get started"

    Step 1# Setting Up The Basic HTML Layout


    #asically$ a basic website layout has the basic HT% &HyperTe't %arkup anguage( structure at first. )n order to write HT% $ you need a plain te't editor or a WY*)WY+ editor as we talked about before. Here is a ,uick information about HT% $ thanks to W-C. HT% stands for Hyper Te't Markup Language HT% is a markup language . markup language is a set of markup tags The tags describe document content HT% documents contain HT% tags and plain text HT% documents are also called web pages. *ince the latest /ersion of HT% is HT% 0 at the time of this article$ we are going to make a website by following HT% 0 standards. #ut first$ let1s learn about the basic layout of HT% $ before the latest /ersion. 2222222222222222222222222222222222222222222222222222222222222222222

    Using di!" #$ements


    The di/ element is a block le/el element used for grouping HT% elements. This e'ample uses fi/e di/ elements to create a multiple column layout3
    <!DOCTYPE html> <html> <body> <div id="container" style="width: !!"#"> <div id="header" style="bac$%ro&nd'color:())* !!+"> <h, style="mar%in'bottom:!+">-ain Title o. /eb Pa%e<0h,><0div> <div id="men&" style="bac$%ro&nd'color:())D1!!+hei%ht:2!!"#+width:,!!"#+.loat:le.t+"> <b>-en&<0b><br> 3T-4<br> C55<br> 6ava5cri"t<0div> <div id="content" style="bac$%ro&nd'color:(EEEEEE+hei%ht:2!!"#+width:7!!"#+.loat:le.t+"> Content %oes here<0div> <div id=".ooter" style="bac$%ro&nd'color:())* !!+clear:both+te#t'ali%n:center+"> Co"yri%ht 8 /95chools:com<0div> <0div> <0body> <0html>

    Using Tab$es
    . simple way of creating layouts is by using the HT% 4table5 tag. %ultiple columns are created by using 4di/5 or 4table5 elements. 6sing 4table5 to create a nice layout is 7OT the correct use of the element. The purpose of the 4table5 element is to display tabular data. The following e'ample uses a table with - rows and 8 columns 9 the first and last row spans both columns using the colspan attribute3
    <!DOCTYPE html> <html> <body> <table width=" !!" border="!"> <tr> <td cols"an="2" style="bac$%ro&nd'color:())* !!+"> <h,>-ain Title o. /eb Pa%e<0h,> <0td> <0tr> <tr> <td style="bac$%ro&nd'color:())D1!!+width:,!!"#+"> <b>-en&<0b><br> 3T-4<br> C55<br> 6ava5cri"t <0td> <td style="bac$%ro&nd'color:(EEEEEE+hei%ht:2!!"#+width:7!!"#+"> Content %oes here<0td> <0tr> <tr> <td cols"an="2" style="bac$%ro&nd'color:())* !!+te#t'ali%n:center+"> Co"yri%ht 8 /95chools:com<0td> <0tr> <0table> <0body> <0html> Yo& sho&ld ta$e a loo$ at the 3T-4 T&torial on /9C 5chools i. yo& thin$ yo& need a little more &nderstandin% o. 3T-4 ; 3T-4 attrib&tes: <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    The Doctype Declaration The first item to appear in the source code of a web page is the doctype declaration. This pro/ides the web browser &or other user agent( with information about the type of markup language in which the page is written$ which may or may not affect the way the browser renders the content. )t may look a little scary at first glance$ but the good news is that most WY*)WY+ web editors will create the doctype for you automatically after you!/e selected from a dialog the type of document you!re creating. )f you aren!t using a WY*)WY+ web editing package$ you :ust write 4";OCTY<E html5 at the top line of e/ery

    website you work on.

    Here is the basic layout of an HTML5 website!


    <!DOCTYPE html> <html> <head> <meta charset="&t.'=" 0> <title>Title<0title> <lin$ hre.="css0style:css" rel="stylesheet" 0> <0head> <body> <header> <h, class="header">3eader ' h,<0h,> <h2>5&bheader ' h2<0h2> <0header> <nav> <&l> <li><a hre.="(">-en& O"tion ,<0a><0li> <li><a hre.="(">-en& O"tion 2<0a><0li> <li><a hre.="(">-en& O"tion 9<0a><0li> <0&l> <0nav> <section id=".irst"> <article class=".irst"> <header> <h,>*rticle<0h,> <0header> <section> This is yo&r .irst article: This is <mar$>hi%hli%hted<0mar$>: <0section> <0article> <article class="second"> <header> <h,>*rticle a%ain<0h,> <0header> <section> This is yo&r second article: <0section> <0article> <0section> <aside> <section> <h,>4in$s<0h,> <&l> <li><a hre.="(">4in$ ,<0a><0li> <li><a hre.="(">4in$ 2<0a><0li> <li><a hre.="(">4in$ 9<0a><0li> <0&l> <0section> <.i%&re>

    <im% width="77" hei%ht="77" src="htt":00www:w9:or%02!!=0site0ima%es0theme'web'semantics" alt="theme5emantic/eb" 0> <.i%ca"tion>/9C 5emantic /eb<0.i%ca"tion> <0.i%&re> <0aside> <.ooter>)ooter *rea' Co"yri%ht 2!,9<0.ooter> <0body> <0html>

    2222222222222222222222222222222222222222222222222222222222222222222 The good and time9sa/ing thing is$ we do not need to include any more self9closing tags like in =HT% drafts &there were many elements labelled self9closing(. >or e'ample$ to create a meta keywords tag you would use 4meta name?@keywords@ content?@HT% 0$C**-$Aa/a*cript@ B5 without the need for a closing 4Bmeta5 elsewhere. #ut now writing it as 4meta name?@keywords@ content?@HT% 0$C**-$Aa/a*cript@5 is completely /alid. Yet$ you can still use the pre/ious one. 2222222222222222222222222222222222222222222222222222222222222222222 Okay$ so that was the basic structure of our website. .s we said before$ in HT% 0$ there are new semantically rich elements that can con/ey the purpose of the element to both de/elopers and browsers. Here are some of the new semantic elements in HT% 03 article aside figcaption figure footer header hgroup mark na/ section time To clarify some points$ let1s talk about our page areas. Headers and footers are pretty self9e'planatory. The na/ element can be used to create a na/igation or menu bar. You can use sections and articles to group your content. The aside element can be used for secondary content. >or e'ample$ as a sidebar of related links. The mark element allowed me to highlight or mark some important te't. >inally$ the figure and figcaption elements specified

    a figure in my content &like an image$ diagram$ photo$ code snippet$ etc.( and let us associate a caption for that figure. *o what we really need now is some C** for that code to make our website look awesome"

    Step %# Sty$ing with &SS


    &ascading Sty$e Sheets &&SS( is a style sheet language used for describing the the look and formatting of a document written in a markup language. )ts most common application is to style web pages written in HT% and =HT% $ but the language can also be applied to any kind of =% document$ including plain =% $ *C+ and =6 . C** is actually designed to separate the document content &written in HT% or a similar markup language( from document presentation$ including elements such as the layout$ colors and fonts. This pretty much impro/es content accessibility. )t also pro/ides more fle'ibility and control in the specification of presentation characteristics$ enable multiple pages to share formatting$ and reduce comple'ity and repetition in the structural content &like @table9less@ web design(. C** can also allow the same markup page to be presented in different styles for different rendering methods$ &on9screen$ in print$ by /oice &when read out by a speech9based browser or screen reader( and on #raille9based$ tactile de/ices. )t can also be used to allow the web page to display differently depending on the screen siDe or de/ice on which it is being /iewed.

    'hat is &SS(
    &SS stands for &ascading Style Sheets *tyles define how to disp$ay HT% elements *tyles were added to HT% E.F to so$!e a prob$em #xterna$ Sty$e Sheets can sa/e a lot of work E'ternal *tyle *heets are stored in &SS )i$es. The synta' of C** will show how to interpret the C** lines$ thanks to W-C G

    W-C C** *ynta'

    #asically a selector is selecting the HT% tag that we want to work on$ then we declare which /alue we want to gi/e to a property of that HT% tag. 7ot so hard$ rightH et1s take a look at how the website looks only with those HT% codesG

    You see$ all the things are displayed as a block. This is the default beha/iour of HT% . .fter adding some basic C**$ you can see this looks pretty much better.

    et1s take a look at the C** done thereG


    header>section>article>aside>.ooter ? dis"lay: bloc$+ A h,:header ? 0@5ome stylin% .or the <h,> ta% at the header@0 width:72em+ hei%ht:2em+ bac$%ro&nd'color:(,e ,b,+ color:(...+ border:2"# dashed blac$+ te#t'ali%n:center+ A h2? color:(!!!+ te#t'ali%n:center+ A nav &l ? te#t'decoration:none+ mar%in'le.t:2C:!D9em+ A nav &l li ? list'style'ty"e:none+ .loat:le.t+ mar%in'ri%ht:,:2 !em+ A nav &l li a? dis"lay:inline+ te#t'decoration:none+ color:(b.!bCd+ A (.irst ? 0@3ere we .loated o&r section to the le.t@0 width:99em+ mar%in'to":,: em+ .loat:le.t+ A article:.irst ? bac$%ro&nd'color:(22ad,!+ te#t'ali%n:center+ mar%in'bottom:!:C9=em+ 0@* little s"ace between two articles@0 A article:second ? color:(...+ bac$%ro&nd'color:(e=,D,D+ 0@3T-4 s"eci.ic@0

    0@Bse em instead o. "#@0 0@to desi%n the site res"onsive later@0

    te#t'ali%n:center+ A aside ? 0@3ere we .loated aside to the ri%ht@0 .loat:ri%ht+ width:,=:1 !em+ A aside &l ? list'style'ty"e:none+ A aside &l li a? te#t'decoration:none+ color:(b.!bCd+ A.ooter ? clear:both+ te#t'ali%n:center+ A

    *o we ha/e co/ered how to create the basic structure of a website by using the latest /ersion of HT% which is HT% 0 and used C**- to add some style to our website. >eel free to lea/e a comment if you ha/e any thoughts or ,uestions. )n the ne't article of How to Create Your Own Website Tutorial$ we will work onG .dding interacti/ity by using Aa/a*cript$ Creating rich content with HT% 0 I C**-.

    %ore on www.designcodeli/e.com

    You might also like