¡Descarga Tutorial HTML del Profesor Carlos Montiel Rentería: Construyendo páginas web básicas y más Apuntes en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería
Tutorial # 2 Construyendo páginas Web básicas
Antes que nada quiero hacer el siguiente comentario: Tal cómo lo mencione previamente, no todos adquirieron el libro de texto, así que tal vez parezca un poco desventajoso, apoyarnos totalmente en el libro de texto, así que les enviare material didáctico al respecto y así considerar que todos lo posean y evitar desventajas. El material didáctico que les enviaré corresponde a una presentación en PowerPoint que elaboré ya hace algunos años en un curso que impartí a profesores de diferentes CECyT’s del I.P.N., pero obviamente lo he actualizado para su mejor aprovechamiento. Ahora si, entramos de lleno al tema de Html que ya hemos iniciado. En el tutorial número 1, el anterior, ya tratamos varias etiquetas, que mencionare enseguida ETIQUETA ATRIBUTOS ACCIÓN … LANG Inicia el documento ( página Web ), y define el lenguaje del documento. … Define el encabezado del documento … Define el título del documento … Define el inicio del cuerpo del documento COLOR, SIZE, y FACE Define características de la letra, color, tamaño y aspecto de la letra, respectivamente. … TYPE Define el inicio de una lista ordenada de valores, y define el símbolo para acompañar los valores … TYPE Define el inicio de una lista desordenada de valores, y define el símbolo para acompañar los valores … Define el elemento perteneciente a una lista, ya sea ordenada o desordenada … Centra el texto delimitado … Permite insertar una imagen al documento Como estarás observando ya son 10 etiquetas que hemos tratado, pero cabe señalar que las dos últimas ( center , img ) les pedí las investigarán , las analizarán , y las comprendieran e incorporarlas a la página Web personal que les solicite como tarea.
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Teclea el siguiente código HTML , al archivo le llamarás: Mi 2a página Web.HTML Te explico las etiquetas nuevas en orden de aparición:
- Etiqueta **** , que permite establecer el idioma español para la página en cuestión.
- Etiqueta **** con los atributos: bgcolor y text , el 1º. Define el color de fondo de la página Web, en este caso el valor hexadecimal indicado: #700000 corresponde al color guinda, y el 2º. Define el color del texto contenido en la página Web, que en este caso es WHITE (blanco en español), recuerda ambos son los colores institucionales.
- Etiqueta **** que permite trazar una línea horizontal a manera de separar por “secciones” el texto contenido o más bien un simple adorno.
- Etiqueta … , que permite dar un tamaño grande al texto que la contenga, puede ser desde **** hasta **** donde es el tamaño más pequeño para el texto.
- Etiqueta … que permite hacer superíndice (o exponente) el texto contenido.
- Etiqueta … que permite hacer subíndice el texto contenido.
- Códigos de caracteres extendidos: o √ define el símbolo de raíz cuadrada ( √ ) o ± define el símbolo ± (más menos) o < define el símbolo < (menor que) o > define el símbolo > (mayor que)
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Ahora revisaremos la etiqueta … que permite insertar una tabla formada por columnas ( TD ) y renglones ( TR ). Captura el siguiente código HTML en un archivo de bloc de notas y llámale: pagina TABLE 1.HTML, se creará una tabla de 3 x 2 celdas ( 3 columnas y 2 renglones , exceptuando las cabeceras): Te explico:
- Etiqueta **** esta etiqueta permite insertar una tabla (renglones y columnas) y el atributo BORDER permite definir los bordes de la tabla, y el número 3 se refiere precisamente al grosor del borde. **** especifica el término de la definición de una tabla.
- Etiqueta **** permite especificar un renglón de la tabla, **** especifica el término del renglón.
- Etiqueta **** permite especificar las cabeceras de c/u de las columnas que tendrá la tabla
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería
- Etiqueta **** permite especificar el contenido de una celda, así mismo también define la columna perteneciente a la tabla, **** especifica el término de la columna.
- Etiqueta **** permite establecer comentarios en el código HTML, es decir esta etiqueta no la interpreta el navegador, así que los comentarios se emplean para tal vez aclarar un poco más el código HTML para el usuario o estudiante. En seguida te muestro la interpretación del código HTML previo por parte del navegador: Enseguida teclea el siguiente código HTML en un archivo de bloc de notas y llámale: pagina TABLE 2 .HTML
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería En el siguiente código HTML te muestro todos los elementos que involucra la creación de una tabla, tecléalo en un bloc de notas y al archivo llámale: pagina TABLE 3 .HTML Te explico:
- Etiqueta … es subordinada de la etiqueta **** , la cual permite definir el Titulo que queramos definir a una tabla.
- Etiqueta … es subordinada de la etiqueta **** , la cual permite definir la cabecera (títulos de las columnas) para una tabla que deseamos definir.
- Etiqueta … es subordinada de la etiqueta **** , la cual define el cuerpo principal de una tabla (celdas que contendrán cierta información).
- Etiqueta … es subordinada de la etiqueta **** , la cual permite definir el pie de tabla (información colocada al final de la tabla, - último renglón-).
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Finalmente, para terminar con el tema de Tablas, teclea el siguiente código HTML en el bloc de notas, y al archivo llámale: pagina TABLE 4.HTML Te explico:
- Etiqueta **** subordinada de la etiqueta **** indica que se expandirá a dos renglones , y en ella esta contenida la etiqueta **** que insertará una imagen ( logo.gif ) con dimensiones: ancho ( width ) de 80 pixeles y altura ( height ) de 80 pixeles. Sin olvidar que pertenece a los títulos de la Tabla.
- Etiqueta **** subordinada de la etiqueta **** indica que se expandirá a dos columnas, es decir: el texto “ Media ” abarcará dos columnas.
- Etiqueta **** subordinada de la etiqueta **** indica que se expandirá a dos renglones, por ello el texto: “ Ojos” ocupará uno de ellos (el primero) y el texto: “ rojos ” ocupara el segundo, y la etiqueta
permite “brincar” un renglón , por ello el texto “ rojos” se coloca en el 2º. Renglón.
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería comprimir los 5 archivos en uno solo , en el Explorador de Windows a través del menú contextual (seleccionar los archivos a comprimir, hacer clic derecho y elegir la subopción “ Carpeta comprimida (en zip) ” de la opción “ Enviar ”), tal como se muestra enseguida, en caso de que no puedas hacerlo, pide ayuda a alguien que si sepa hacerlo, finalmente al archivo comprimido llámalo como tus datos: Apellidos , Nombre(s) y Grupo , por ejemplo así debe de mostrarse: Pérez Díaz Petra 2IM1.ZIP (C) Crear el código HTML para obtener la siguiente interpretación por el navegador: (D) Crear el código HTML para obtener la siguiente interpretación por el navegador:
CECyT 6 – COMPUTACIÓN BÁSICA II – TEMA HTML prof. carlos montiel rentería Los dos archivos resultantes llámales Tabla 1 tarea.HTML y Tabla 2 tarea.HTML , Los comprimes en uno solo (zip) y le llamas como tus datos: Apellidos, Nombre(s) y Grupo, por ejemplo así debe de mostrarse: Pérez Díaz Petra 2IM8.ZIP (E) Revisar cuidadosamente el archivo que les estoy enviando, llamado: “Curso Taller HTML 4.0.ppsx” ya que en el próximo Tutorial les solicitare capturar ciertos códigos HTML. Para finalizar, solo les recuerdo: únanse al llamado “ Quédate en casa ”, de tal forma colaborar para que nuestro regreso a clases sea el 1º de Junio 2020, saludos y cuídense harto.
