Responsive web dizajn – kako napraviti stranicu – Priprema HTML sadržaja i strukture

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN
Kako napraviti zaglavlje od Letiba

Priprema HTML sadržaja

Kako bi počeli naš projekt, pretpostavljam da ste upoznati sa početnim postupcima izrade stranice kao što je izrada mape stranice i datoteka. Ukoliko niste, u skoroj budućnosti obraditi ću i ti temu. Stoga nas redovno pratite na našim stranicama.

Dakle kad otvorima naš uređivač, imamo praznu datoteku koja sadrži osnovne zahtjeve koja sadrži jedan HTML dokument.

<!DOCTYPE HTML>
 <html>
    <head>
       <meta http-equiv=”Content-Typecontent=”text/html; charset=UTF-8“>
       <meta name=”viewportcontent=”width=device-width, initial-scale=1“>
       <title>Creating a Responsive Web Design</title>
    </head>
    <body>
  
  
       <!– ovdje ide sadržaj stranice –>
  
  
  
    </body>
 </html>

Prvo možemo povezati našu datoteku sa css datotekom u root datoteci tako što ćemo dodati slijedeći link u zaglavlje naše stranice.

<link href=”css/screen.cssrel=”stylesheettype=”text/css“>

Naravno, unijet ćemo našu vlastitu poveznicu sa vanjskom .css datotekom tako što ćemo upisati između navodnika put koji vodi do spomenute datoteke.

Strategija za izgled web stranice

Prije nego krenemo sa ubacivanjem HTML-a u naš sadržaj trebali bi imati neku ideju kako bi stranica trebala izgledati i pretvoriti to u odjeljke.

web layout - Strategija za izgled web stranice

Na temelju ovog posebnog izgleda trebati ćemo zaglavlje <header>, tri odjeljka <section>, navigaciju <nav> i podnožje ili <footer> područje.

Navigaciju ćemo kasnije pomjeriti između zadnjeg odjeljka i podnožja internet stranice.

 

Na kraju ćemo ubaciti <div> element koji će okružiti sve ove elemente i on će biti najveći mogući element unutar <body> oznake.web layout Letibo - finish

Izrada glavnih HTML odjeljaka

Idemo sada izraditi sadržaj tako što ćemo prvo izraditi glavne odjeljke na stranici kao što su zaglavlje (header), odjeljci (section), navigacja i podnožje (footer). Prvo ćemo napraviti div  oznakom koja okružuje sve ostale odjeljke. Možemo mu dati klasu (class) ili naziv (id). U našem slučaju dodat ćemo naziv id=”page” pošto ćemo taj naziv koristiti samo jednom.

<div id=”page“>
  
 <header></header><!–/header–>
  
 <section class=”main“></section><!–/main–>
  
 <section class=”atmosphere“></section><!–/atmosphere–>
  
 <section class=”how-to“></section><!–/how-to–>
  
 <nav></nav><!–/nav–>
  
 <footer></footer><!–/footer–>
  
  
 </div><!–/page–>

Odjeljcima smo dali klasu kako bi ih bili u mogućnosti uređivati.

Dodavanje sadržaja u zaglavlje <header>

Kako bi unijeli sadržaj u naše zaglavlje, potrebni su nam slijedeći elementi; Potreban nam je oznaka sidra za naš logo, div container kako bi držao područje sa naslovom i oznaku sidra (gumb). I na kraju tu je naslov ili h1 oznaka i oznaka sidra.

Kako napraviti zaglavlje od Letiba

Sada kada vidimo situaciju, idemo uvrstiti sadržaj i zaglavlje.

<header>
 <a class=”logotitle=”” href=”https://www.letibo.hr“>Letibo</a>
 <div class=”hero“>
 <h1>Add interest for…</h1>
 <a class=”btntitle=”Get advice from top designershref=”#“>Get advice from top designers</a>
 </div>
  
 </header><!–/header–>

Dodavanje sadržaja u područje pod klasom “main”

Pogledajmo na brzinu elemente koji će nam trebati pri izradi ovog sadržaja. Svaki od ovih elemenata bit će podijeljena na tri kolone (aside). Unutar svakog aside elementa nalazi će se div element koji će sadržavati h3, p, a, oznaku.

uređivanje područja klase main

unutar <section class=”main”></section> elementa ubacit ćemo slijedeći kod.

<aside>
 <div cass=”content“>
 <h3><a href=”#“>What&apos;s trending</a></h3>
 <p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. <a href= “http://codifydesign.com“>Morbi commodo</a>, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
 </div>
 </aside> 
 <aside> 
 <div cass=”content“>
 <h3><a href=”#“>Where to find it</a></h3>
 <p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
 </div>
 </aside> 
 <aside> 
 <div cass=”content“>
 <h3><a href=”#“>Tools of the trade</a></h3>
 <p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
 </div>
 </aside>

Dodavanje sadržaja u područje pod klasom “atmosphere”

Sada ćemo dodati sadržaj u područje pod klasom “atmosphere”. Pogledajmo koje HTML elemente trebamo da bi to napravili.

sadrzaj atmosphere

Dakle, za atmosphere područje trebamo vanjski <article> element imamo element za naslov, paragraf i sidro. I to je sve. Pogledajmo kod koji ide između <section class=”atmosphere”></section.

<article>
 <h2>Creating a modern atmosphere</h2>
 <p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
 <a href=”#class=”btntitle=”Neki naslov“>Learn more</a>
 </article>

Dodavanje sadržaja u područje pod klasom “how to”

Naposljetku ćemo dodati sadržaj u područje po klasom “how-to”.

How to sadrzaj

Kao i prije pogledajmo HTML elemente koje ćemo trebati. Html aside elemente postavit ćemo lijevo unutar odjeljka (section) klase “how to” unutar kojeg imamo sliku pozadine naslovnu oznaku (h4) paragraf i poveznicu i sve to u div elementa. Sa desne strane postavit ćemo oznake navoda.

Postavimo slijedeći kod unutar <section=”how_to”></section>

<aside>
 <div class=”content“>
 <img src=”images/photo_seating.jpgwidth=”250height=”135alt=”Learn how to chose proper seating“>
 <h4>How-To: Seating</h4>
 <p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
 <a title=”Learn how to choose the proper seating.href=”http://codifydesign.com“>Learn more</a>
 </div>
 </aside> 
 <aside> 
 <div class=”content“>
 <img src=”images/photo_lighting.jpgwidth=”250height=”135alt=”Learn how to chose proper lightning“>
 <h4>How-To: Lighting</h4>
 <p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
 <a title=”Learn how to choose the proper lighting.href=”http://codifydesign.com“>Learn more</a>
 </div>
 </aside> 
 <blockquote> 
 <p class=”quote“>Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
 <p class=”credit“><strong>Author Name</strong><br><em>Business Title</em><br> Company</p>
 </blockquote>

Dodavanje sadržaja za navigaciju

Ostalo nam je dodavanje sadržaja koji ide unutar elementa za navigaciju. Kao što je to i uobičajeno za izradu navigacije koristimo unordered liste.

izrada navigacije

Dakle, naša navigacija u html-u će izgledati ovako:

<nav>
     <ul> 
  <li>
       <a title=”About ushref=”#“>About us</a>
       <ul>
            <li><a title=”sublink1href=”#“>sublink1</a></li>
            <li><a title=”sublink2href=”#“>sublink2</a></li>
       </ul>
 </li>
 <li>
          <a title=”Design Cornerhref=”#“>Design Corner</a>
         <ul>
               <li><a title=”sublink1href=”#“>sublink1</a></li>
               <li><a title=”sublink2href=”#“>sublink2</a></li>
        </ul>
 </li>
 <li>
         <a title=”Productshref=”#“>Products</a>
       <ul>
             <li><a title=”sublink1href=”#“>sublink1</a></li>
             <li><a title=”sublink2href=”#“>sublink2</a></li>
             <li><a title=”sublink3href=”#“>sublink3</a>
                    <ul>
                                 <li><a title=”subsublink1href=”#“>subsublink1</a></li>
                                 <li><a title=”subsublink2href=”#“>subsublink2</a></li>
                     </ul>
                </li>
        </ul>
 </li>
 <li>
         <a title=”Contact ushref=”#“>Contact us</a>
 </li>
 </ul>
 </nav><!–/nav–>

uz napomenu da je treba postaviti između zadnjeg <section></section> područja i podnožja <footer></footer>

Unošenje sadržaja u podnožje (footer)

Sada nam preostaje dodati još malo sadržaja u podnožje prije nego počnemo uređivati našu stranicu sa CSS-om. Prvo što ćemo napraviti područje za “copyright”. Iduću liniju dodat ćemo div element sa klasom “content” i popuniti sa zadanim sadržajem. Dakle između oznaka podnožja <footer></footer> unijet ćemo slijedeći kod.

&copy; Everyday Things
 <div class=”content“> 
 <a title=”Privacy policyhref=”#“>Privacy policy</a>
 <a title=”Terms of servicehref=”#“>Terms of service</a>
 </div>

Sada imamo pravilno strukturiranu HTML stranicu koja zahtijeva uređivanje pomoću CSS stilova. U ovom naslovu nismo uređivali naš sadržaj nego smo se bazirali na unošenje strukture i sadržaja stranice. U idućim poglavljima obrađivat ćemo uređivanje sadržaja u layout-a pomoću css-a.

Na kraju pogledajmo kako izgleda cjelokupna stranica u html-u koju ćemo uređivati.

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv=”Content-Typecontent=”text/html; charset=UTF-8“>
 <meta name=”viewportcontent=”width=device-width, initial-scale=1“>
 <title>Creating a Responsive Web Design</title>
 <link href=”css/screen.cssrel=”stylesheettype=”text/css“>
 </head>
 <body>
  
 <div id=”page“>
  
 <header>
 <a class=”logotitle=”” href=”https://www.letibo.hr“>Letibo</a>
 <div class=”hero“>
 <h1>Add interest for…</h1>
 <a class=”btntitle=”Get advice from top designershref=”#“>Get advice from top designers</a>
 </div>
  
 </header><!–/header–>
  
 <section class=”main“>
 <aside>
 <div cass=”content“>
 <h3><a href=”#“>What&apos;s trending</a></h3>
 <p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. <a href= “http://codifydesign.com“>Morbi commodo</a>, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
 </div>
 </aside>
 <aside>
 <div cass=”content“>
 <h3><a href=”#“>Where to find it</a></h3>
 <p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
 </div>
 </aside>
 <aside>
 <div cass=”content“>
 <h3><a href=”#“>Tools of the trade</a></h3>
 <p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
 </div>
 </aside>
 </section><!–/main–>
  
 <section class=”atmosphere“>
 <article>
 <h2>Creating a modern atmosphere</h2>
 <p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
 <a href=”#class=”btntitle=”Neki naslov“>Learn more</a>
 </article>
 </section><!–/atmosphere–>
  
 <section class=”how-to“>
 <aside>
 <div class=”content“>
 <img src=”images/photo_seating.jpgwidth=”250height=”135alt=”Learn how to chose proper seating“>
 <h4>How-To: Seating</h4>
 <p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
 <a title=”Learn how to choose the proper seating.href=”http://codifydesign.com“>Learn more</a>
 </div>
 </aside>
 <aside>
 <div class=”content“>
 <img src=”images/photo_lighting.jpgwidth=”250height=”135alt=”Learn how to chose proper lightning“>
 <h4>How-To: Lighting</h4>
 <p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
 <a title=”Learn how to choose the proper lighting.href=”http://codifydesign.com“>Learn more</a>
 </div>
 </aside>
 <blockquote>
 <p class=”quote“>Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
 <p class=”credit“><strong>Author Name</strong><br><em>Business Title</em><br> Company</p>
 </blockquote>
 </section><!–/how-to–>
  
 <nav>
 <ul>
 <li>
 <a title=”About ushref=”#“>About us</a>
 <ul>
 <li><a title=”sublink1href=”#“>sublink1</a></li>
 <li><a title=”sublink2href=”#“>sublink2</a></li>
 </ul>
 </li>
 <li>
 <a title=”Design Cornerhref=”#“>Design Corner</a>
 <ul>
 <li><a title=”sublink1href=”#“>sublink1</a></li>
 <li><a title=”sublink2href=”#“>sublink2</a></li>
 </ul>
 </li>
 <li>
 <a title=”Productshref=”#“>Products</a>
 <ul>
 <li><a title=”sublink1href=”#“>sublink1</a></li>
 <li><a title=”sublink2href=”#“>sublink2</a></li>
 <li><a title=”sublink3href=”#“>sublink3</a>
 <ul>
 <li><a title=”subsublink1href=”#“>subsublink1</a></li>
 <li><a title=”subsublink2href=”#“>subsublink2</a></li>
 </ul>
</li>
 </ul>
 </li>
 <li>
 <a title=”Contact ushref=”#“>Contact us</a>
 </li>
 </ul>
 </nav><!–/nav–>
  
 <footer>
 &copy; Everyday Things
 <div class=”content“>
 <a title=”Privacy policyhref=”#“>Privacy policy</a>
 <a title=”Terms of servicehref=”#“>Terms of service</a>
 </div>
 </footer><!–/footer–>
  
  
 </div><!–/page–>
  
  
  
 </body>
 </html>
admin

admin

Leave a Replay

ADRESA:

Letibo j.d.o.o. za računalne usluge
– izrada web stranica –
Franje Kuhača 4
31500 Našice
Mob: 091/923-9837
OIB: 51140756305
IBAN: HR4224020061100671367

ZATRAŽITE BESPOVRATNA SREDSTVA ZA IZRADU VAŠE WEB STRANICE

Ministarstvo gospodarstva poduzetništva i obrta objavilo je javni Poziv za bespovratna sredstva za unaprjeđenje ili izradu web stranica te izradu web shopa.
prilika !

Zadnje objave

Smještaj web stranica

Studio4web, web hosting, registracija domena