Just nu i M3-nätverket
Gå till innehåll
r0ad

Skapa sida efter bild HTML5

Rekommendera Poster

r0ad

Hej!

 

Jag har aldrig jobbat i HTML 5 och har fått en uppgift av en arbetskollega att göra en väldigt SIMPEL sida (ser det ut att vara enligt bilden) i HTML 5 men har aldrig använt det.

 

webutv.png

 

Någon som kan ge mig en hand och försöka skapa själva "skalet" för hemsidan?

Tack på förhand.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Jonas__B
Postad (redigerade)

Just HTML5 syntaxen för sidan kan se ut så här.

<!DOCTYPE html>
<!--[if lt ie 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if ie 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if ie 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt ie 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Exempelsida</title>
       <meta name="description" content="">
   </head>
   <body>
	<section id="wrapper">
		<h1>Webbutveckling 1: Diagnos</h1>
		<div class="aside">
			<h4>Syften</h4>
			<ol>
				<li>Punkt 1</li>
				<li>Punkt 2</li>
				<li>Punkt 3</li>
			</ol>
			<p>
				<img src="bilden.jpg" alt="bild på en glad gubbe" />
			</p>
		</div>
		<p class="ingress">Denna ingress är fetstilad</p>
		<p>Stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Nytt stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Ytterligare stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</section>
   </body>
</html>

 

Sedan utseendet förändrar man med hjälp av CSS (Stilmallar). Där definierar man hur olika objekt ska se ut; t ex hur bred en viss sektion ska vara och vilken färg och storlek det ska vara på text och rubriker.

 

Jag har inte använt någon av de föreslagna verktygen, men skulle nog rekommendera Expression Web.

 

 

Vad är det just med HTML5 du behöver? Ser inget HTML5-specifika funktioner med den design bilden visar.

Redigerad av Jonas__B

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
r0ad
Postad (redigerade)

Just HTML5 syntaxen för sidan kan se ut så här.

<!DOCTYPE html>
<!--[if lt ie 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if ie 7]> 		<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if ie 8]> 		<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt ie 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Exempelsida</title>
       <meta name="description" content="">
   </head>
   <body>
	<section id="wrapper">
		<h1>Webbutveckling 1: Diagnos</h1>
		<div class="aside">
			<h4>Syften</h4>
			<ol>
				<li>Punkt 1</li>
				<li>Punkt 2</li>
				<li>Punkt 3</li>
			</ol>
			<p>
				<img src="bilden.jpg" alt="bild på en glad gubbe" />
			</p>
		</div>
		<p class="ingress">Denna ingress är fetstilad</p>
		<p>Stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Nytt stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<p>Ytterligare stycke habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</section>
   </body>
</html>

 

Sedan utseendet förändrar man med hjälp av CSS (Stilmallar). Där definierar man hur olika objekt ska se ut; t ex hur bred en viss sektion ska vara och vilken färg och storlek det ska vara på text och rubriker.

 

Jag har inte använt någon av de föreslagna verktygen, men skulle nog rekommendera Expression Web.

 

 

Vad är det just med HTML5 du behöver? Ser inget HTML5-specifika funktioner med den design bilden visar.

 

 

 

Jag bugar och bockar för koden!

Jag vet inte riktigt, men det skulle skrivas i HTML 5 och det var tydligen väldigt, väldigt viktigt.

 

Det är några problem jag har, jag får inte min class: "aside" till att bli avlång och lägga sig på sidan liknande på bilden. Hur skriver jag detta? Jag är verkligen inte bra på detta men jag behöver hjälp. Fick ett tips om att göra den till en "box" eller "låda" för att sen kunna flytta runt den med align och margin. Samma med själva huvudfönstret för att få ordning på allt.

Redigerad av r0ad

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Jonas__B

Jag bugar och bockar för koden!

Jag vet inte riktigt, men det skulle skrivas i HTML 5 och det var tydligen väldigt, väldigt viktigt.

 

Det är några problem jag har, jag får inte min class: "aside" till att bli avlång och lägga sig på sidan liknande på bilden. Hur skriver jag detta? Jag är verkligen inte bra på detta men jag behöver hjälp. Fick ett tips om att göra den till en "box" eller "låda" för att sen kunna flytta runt den med align och margin. Samma med själva huvudfönstret för att få ordning på allt.

 

Jo, det brukar heta så. Men vad är syftet med att ha det i HTML5?

 

Man får komplettera med CSS för att det ska se ut på ett visst sätt, som jag skrev.

Typ så här:

	<style type="text/css">
		html{font: normal normal 1em/1.5}
		body{padding:20px; font-size:0.8em;}

		h1 {border-bottom:3px solid #ccc;padding-bottom:10px}
		p.ingress {font-weight:bold}

		#wrapper {padding: 0 20px; border: 1px solid #999; width:800px;overflow:hidden}
		div.aside{float:right; background-color: #f5f5f5; padding:0 10px;width:200px; margin: 0 0 10px 10px; }
		div.aside p img {width:150px; height:150px; background-color:#eee;}
	</style>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
r0ad

Jo, det brukar heta så. Men vad är syftet med att ha det i HTML5?

 

Man får komplettera med CSS för att det ska se ut på ett visst sätt, som jag skrev.

Typ så här:

	<style type="text/css">
		html{font: normal normal 1em/1.5}
		body{padding:20px; font-size:0.8em;}

		h1 {border-bottom:3px solid #ccc;padding-bottom:10px}
		p.ingress {font-weight:bold}

		#wrapper {padding: 0 20px; border: 1px solid #999; width:800px;overflow:hidden}
		div.aside{float:right; background-color: #f5f5f5; padding:0 10px;width:200px; margin: 0 0 10px 10px; }
		div.aside p img {width:150px; height:150px; background-color:#eee;}
	</style>

 

Jag löste situationen galant då jag använde Dreamweaver CS5 där HTML5 redan fanns. Gjorde om din kod lite och sen så fixade det sig med all hjälp som finns i programmet så jag lyckades helt enkelt göra en CSS fil och rätta till alla problem.

 

Tack så hemskt mycket Jonas!

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...