{"id":78,"date":"2022-09-13T16:01:37","date_gmt":"2022-09-13T16:01:37","guid":{"rendered":"https:\/\/blog.robetorr.com\/?p=78"},"modified":"2023-01-23T20:20:14","modified_gmt":"2023-01-23T20:20:14","slug":"primer-codigo-bootstrap-html","status":"publish","type":"post","link":"https:\/\/blog.robetorr.com\/index.php\/2022\/09\/13\/primer-codigo-bootstrap-html\/","title":{"rendered":"Primer c\u00f3digo Bootstrap + HTML"},"content":{"rendered":"\n

Para crear nuestro primer c\u00f3digo, abiremos un editor de texto como sublime-text<\/a> y escribir ah\u00ed lo siguiente:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \n  <title>Curso bootstrap HTML<\/title>\t\t\t\n  <link href=\"assets\/image\/favicon.png\" rel=\"icon\">\n  <link href=\"assets\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n  <script src=\"assets\/js\/jquery-3.6.1.min.js\"><\/script>\n  <script src=\"assets\/js\/bootstrap.bundle.min.js\" crossorigin=\"anonymous\"><\/script>\n  <link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.6.3\/css\/all.css\" integrity=\"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s\/\" crossorigin=\"anonymous\">\n  <link href=\"assets\/css\/app.css\" rel=\"stylesheet\">\t\t\n<\/head>\n<body>\n<div class=\"container\">\n\t<div class=\"row\">\n\t\t<div class=\"col\">\n\t\t\t<h1>BIENVENIDOS AL CURSO DE BOOTSTRAP HTML<\/h1>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
DOCTYPE html<\/strong>  informa al navegador que versi\u00f3n de HTML (o XML) se us\u00f3 para escribir el documento. Doctype es una declaraci\u00f3n no una etiqueta.<\/p>\n\n\n\n
HTML<\/strong> etiqueta para declarar que estamos creando un sitio con codigo en formato HTML.<\/p>\n\n\n\n
HEAD<\/strong> Etiqueta que provee informaci\u00f3n general (metadatos) acerca del documento, incluyendo su t\u00edtulo y enlaces a scripts y hojas de estilos.<\/p>\n\n\n\n
META<\/strong> Etiquetas que sirven para aportar informaci\u00f3n sobre el documento como el tipo de caracter, compatibilidad con navegadores, etc.<\/p>\n\n\n\n
TITLE<\/strong> Etiqueta para definir el t\u00edtulo del sitio. El titulo es la informaci\u00f3n que se muestra en la cabecera de la pagina WEB<\/p>\n\n\n\n
LINK<\/strong> Etiqueta para llamar hojas de estilos y el icono del sitio web.<\/p>\n\n\n\n
SCRIPT<\/strong> Etiqueta para llamar c\u00f3digo javascript.<\/p>\n\n\n\n
BODY<\/strong> Etiqueta que representa el contenido de un documento HTML. Todo lo que esta entre <body> y <body> es lo que se muestra como el contenido de una pagina web.<\/p>\n\n\n\n
DIV<\/strong> es una etiqueta que define las divisiones existentes en el contenido de una p\u00e1gina web. Puede utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes \u00e1reas de color, entre otras posibilidades. La apariencia o comportamiento de una etiqueta <div> generalmente son definidos a traves de c\u00f3digo de estilos y c\u00f3digo javascript.<\/p>\n\n\n\n
Bootstrap<\/strong> es uno de los frameworks CSS de c\u00f3digo abierto m\u00e1s conocidos y m\u00e1s utilizados en el mundo del desarrollo web. Este framework facilita enormemente la maquetaci\u00f3n de p\u00e1ginas web, ya que te permite crear una interfaz muy limpia y completamente responsive, es decir, adaptable a cualquier tama\u00f1o de pantalla.<\/p>\n\n\n\n
En este caso en el codigo del body se observan tres clases css predefinidas por bootstrap:<\/p>\n\n\n\n
container<\/strong> provee un contenedor responsive de ancho fijo. <\/p>\n\n\n\n
Que significa responsive?<\/strong><\/p>\n\n\n\n
Significa que de manera predeterminada la p\u00e1gina que estamos creando puede ajustar su tama\u00f1o dependiendo de si la estamos viendo desde un tablet, smartphone o desktop PC.  <\/p>\n\n\n\n
row<\/strong> clase de bootstrap para crear una seccion de fila.<\/p>\n\n\n\n
col<\/strong> clase de bootstrap para crear una seccion de columna.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Para crear nuestro primer c\u00f3digo, abiremos un editor de texto como sublime-text y escribir ah\u00ed lo siguiente: DOCTYPE html informa al navegador que versi\u00f3n de HTML (o XML) se us\u00f3 para escribir el documento. Doctype es una declaraci\u00f3n no una etiqueta. HTML etiqueta para declarar que estamos creando un sitio con codigo en formato HTML. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/posts\/78"}],"collection":[{"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":4,"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/posts\/78\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.robetorr.com\/index.php\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}