Paso 2: El HTML
< html >
< head >
< meta charset = "utf-8" >
< title > ejemplo de proyecto < / title >
< link href="Common/css/style.css" tipo = "text/css" rel = "stylesheet" / >
< link href="common/css/css3.css" tipo = "text/css" rel = "stylesheet" / >
< link href="Common/fontface/fontface.css" tipo = "text/css" rel = "stylesheet" / >
< script tipo = "texto/javascript" src="common/js/jquery.js" >< / script >
< script tipo = "texto/javascript" src="common/js/cycle.js" >< / script >
< script tipo = "texto/javascript" src="common/js/index.js" >< / script >
<!--[Si IE 6] >< de la escritura de tipo = "texto/javascript" src="common/js/jq-png-min.js" >< / script ><! [endif]-->
<!--[if IE] >< de la escritura de tipo = "texto/javascript" src="common/js/ieh5fix.js" >< / script ><! [endif]-->
< /HEAD >
<! —---se inicia sección del cuerpo--->
< cuerpo >
<! —---jefe principal comienza--->
< header >
<!—-----------------------------------Logo---------------------------------->
< div clase = "contenedor" >
< a href="home.html" id = "logo" >< img src="common/images/logo_3.png" alt = "#" >< /a >
< artículo clase = "num" >< span > (123) 456.7890 < / span >< / sección >
<! —---barra de navegación--->
< nav >
< ul >
< clase li = "activo" >< a href = "#" > Inicio < /a >< /li >
< li >< a href = "#" > Acerca de nosotros < /a >< /li >
< li >< a href = "#" > Noticias < /a >< /li >
< li >< a href = "#" > Póngase en contacto con nosotros < /a >< /li >
< li >< a href = "#" > productos < /a >< /li >
< li >< a href = "#" > servicios < /a >< /li >
< li >< a href = "#" > testimonios < /a >< /li >
< /ul >
< / nav >
<! —---izquierda bandera contenedor--->
< id sección = "banner_container" >
< artículo clase = "left_banner" >
PROYECTO de ejemplo de < h2 > < / h2 >
< p > Proyecto signos y pancartas ha sido el área de Buffalo durante los últimos 14 años. Hacemos prácticamente todos los tipos de carteles y pancartas. Puesto que la mayoría de nuestros signos se realizan personalizada, por favor llame, fax o correo electrónico para una cotización exacta. < /p >
< / sección >
<!—-----------------------------Slider Container---------------------------->
< artículo clase = "slider_container" >
< artículo clase = "slider" >
< artículo clase = "slide_content" >
< img src="common/images/banner_img_1.jpg" width = "495" height = "303" alt = "#" >
< artículo clase = "text_line" > Proyecto signos ha sido una fuente local, regional y nacional a las necesidades gráficas signo, bandera y flota de cientos de clientes! < / sección >
< / sección >
< artículo clase = "slide_content" >
< img src="common/images/banner_img_2.jpg" width = "495" height = "303" alt = "#" >
< artículo clase = "text_line" > Proyecto signos ha sido una fuente local, regional y nacional a las necesidades gráficas signo, bandera y flota de cientos de clientes! < / sección >
< / sección >
< / sección >
<!—-----------------------------Slider Controls----------------------------->
< a href = "#" class = "Flecha_Izquierda" >< /a >
< a href = "#" class = "right_arrow" >< /a >
< / sección >
< / sección >
< / div >
< / encabezado >
<! —---contenedor cuerpo principal--->
< div clase = "contenedor" >
< id sección = "body_container" >
< id sección = "top_section" >
Proyecto Bienvenidos a < span > < h2 > < /span >< / h2 >
< img src="common/images/van_img.jpg" alt = "#" class = "van_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< img src="common/images/house_img.jpg" alt = "#" class = "house_img" / >
< p > lorem libero nec risus. < /p >
< p > Nulla facilisi. < /p >
< / sección >
<! —---contenedor inferior--->
< id sección = "bottom_container" >
< artículo clase = "common_box" >
Testimonios de < h3 > < / h3 >
< clase p = "última" > "Lorem ipsum dolor sit amet, consectetur adipiscing elit. DUIS ullamcorper mollis diam en sagittis." < /p >
< a href = "#" class = "nombre" >-Vijay Kumar < /a >
< / sección >
< artículo clase = "common_box segundo" >
< h3 > dirección y contacto < / h3 >
< p > 1234 Nodia Road (cerca de la esquina de ferrocarril de St.) M.G. nagar, Nodia 14007 < /p >
< ul clase = "contacto" >
< li >< span > Teléfono: < /span > 123-456-7890 < /li >
< li >< span > Fax: < /span > 987-654-3210 < /li >
< li >< span > correo electrónico: < /span >< a href = "mailto:thesignguy
< /ul >
< / sección >
< / sección >
< / sección >
< / div >
<! —---navegación pie de página--->
pie de < >
< div clase = "contenedor" >
< id sección = "menu" >
< ul clase = "footer_nav" >
< clase li = "activo" >< a href = "#" > Inicio < /a >< /li >
< li >< a href = "#" > Acerca de nosotros < /a >< /li >
< li >< a href = "#" > Noticias < /a >< /li >
< li >< a href = "#" > Póngase en contacto con nosotros < /a >< /li >
< li >< a href = "#" > productos < /a >< /li >
< li >< a href = "#" > servicios < /a >< /li >
< li >< a href = "#" > testimonios < /a >< /li >
< /ul >
<! —---iconos sociales de pie de página--->
< ul clase = "social_icon" >
< li >< a href = "#" class = "facebook" >< /a >< /li >
< li >< a href = "#" class = "google" >< /a >< /li >
< clase li = "última" >< a href = "#" class = "twitter" >< /a >< /li >
< /ul >
< / sección >
<!—----------------------------The Footer End------------------------------->
< ul clase = "bottom_nav" >
< clase li = "primero" > COPYRIGHT © < /li >
< li >< a href = "www.Projectsigns.com" > WWW.ProjectSIGNS.COM < /a >< /li >
< clase li = "última" > todos los derechos reservados < /li >
< /ul >
< / div >
< / pie de página >
< /body >
< / html >
Este es el código del diseño PSD que hemos convertido en una página web HTML5. Y para hacerte entender completamente para que usted puede comenzar a convertir archivos PSD en sitios web, vamos a explicarlo línea por línea.
