HTML: HTML significa lenguaje de marcado de hipertexto. Se utiliza para diseñar páginas web utilizando un lenguaje de marcado. HTML es la combinación de hipertexto y lenguaje de marcado. El hipertexto define el vínculo entre las páginas web. Se utiliza un lenguaje de marcado para definir el documento de texto dentro de la etiqueta que define la estructura de las páginas web.
CSS: las hojas de estilo en cascada, conocidas cariñosamente como CSS, es un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web estén presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web.
A continuación se muestra el código fuente para la construcción de Facebook como página de inicio:
Puedes ver el enlace de Github para descargar el código completo de este artículo.
Sección HTML : el nombre del archivo es homepage1.html
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="new.css" media="screen" /> </head> <body> <div class=" header1"> <div id="name" class="header1"> OLD MASTER </div> <div id="searcharea" class="header1"> <input placeholder="search here...." type="text" id="searchbox" /> </div> <div id="profilearea" class="header1">Profile</div> <div id="profilearea1" class="header1">|</div> <div id="profilearea2" class="header1">Home</div> </div> <div class="sidenav"> <div class="bodyn"> <div id="side1" class="bodyn">Profile</div> <div id="side2" class="bodyn">edit profile</div> <div id="side3" class="bodyn">News feed</div> <div id="side4" class="bodyn">Messages</div> <div id="side5" class="bodyn">Events</div> <div id="side6" class="bodyn">PAGES</div> <div id="side7" class="bodyn">Pages feed</div> <div id="side8" class="bodyn">Like pages</div> <div id="side9" class="bodyn">Create page</div> <div id="side10" class="bodyn">Create ad</div> <div id="side11" class="bodyn">GROUPS</div> <div id="side12" class="bodyn">New groups</div> <div id="side13" class="bodyn">Create group</div> <div id="side14" class="bodyn">APPS</div> <div id="side15" class="bodyn">Games</div> <div id="side16" class="bodyn">On this day</div> <div id="side17" class="bodyn">Games feed</div> <div id="side18" class="bodyn">FRIENDS</div> <div id="side19" class="bodyn">Close friends</div> <div id="side20" class="bodyn">Family</div> <div id="side21" class="bodyn">INTERESTS</div> <div id="side22" class="bodyn">Pages and public</div> <div id="side23" class="bodyn">EVENTS</div> <div id="side24" class="bodyn">Create event</div> </div> </div> <div class="post00"></div> <div class="post10"></div> <div class="header0001"></div> <div class="sideboxxx"></div> <div class="sideboxxxx2"></div> <div class="post"> <div id="column-1" class="post"> update status | add photos/ videos | create photo album <hr><br><br><br><br><br><br> <hr> </div> <div id="postpos" class="post"> <input type="submit" id="buttonpost" value="post" /> </div> <div id="postboxpos" class="post"> <textarea placeholder="What's in your mind" id="postbox"> </textarea> </div> </div> <div class="post1"> <img src="mini1.png" alt="image is here" height="40" width="40" /><br> <img src="mini......png" alt="image is here" height="400" width="575" /><br><br> <p6>Like Comment Share</p6><br> <hr> <p1>Amit Deb</p1> <p2> and</p2> <p1> 5 others</p1> <p2> like this</p2> <div id="post2text" class="post1"> <p3>Rani Mukharji </p3> <p2>with </p2> <p1> Arup Pegu</p1> <p2> and</p2> <p1> 15 others.</p1><br> <p4>4 hrs.</p4> </div> <div id="commentprof2" class="post1"> <img src="mini1.png" alt="image is here" height="25" width="25" id="profpic" /> </div> <div id="commentboxpos2" class="post1"> <input type="text" placeholder="comment" id="commentbox" /> </div> </div> <div class="sidebox"> <div id="sidebox1" class="sidebox"> <div id="sideboxx1">YOUR PAGES</div> <hr><br><br>See all <hr> <div id="sideboxx2"> This Week </div><br><br>See more <hr> <div id="sideboxx3"> Recent Posts </div><br><br>See more <hr> <div id="sideboxx4"> You haven't posted in this days </div><br><br><br>See all </div> <div id="post1pos" class="sidebox"> <input type="submit" id="buttonpost1" value="write a post" /> </div> </div> <div class="sideboxxx2"> <div id="sidebox2" class="sideboxxx2"> <hr> <div id="sideboxx21">Trending</div> <br><br><br>See more <hr> <div id="sideboxx22"> Suggested Pages </div><br><br><br>See all <hr> <div id="sideboxx23"> People you may know </div><br><br><br><br>See all </div> </div> </body> </html>
Sección CSS: el nombre del archivo es new.css
Descargue los archivos HTML, CSS e imágenes de Github y guarde todos los archivos en una carpeta y ejecute el archivo homepage1.html . Mostrará el resultado.
Producción:
Publicación traducida automáticamente
Artículo escrito por miniyadav1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA