Lo primero que haremos sera la estructura para poder hacer la pagina empezaremos a hacer los cuadros de texto imágenes y todo lo que queramos poner en la pagina web
Paso 1:
Abriremos el programa y seleccionamos la opcion HTML
Paso 2:
Acontinuacion veremos los codigos de programacion y un espacio un blanco
Hacemos clic en el espacio en blanco y seleccionamos insertar etiqueta DIV
Paso 3:
Nos saldra una ventana en la cual, en la opcion ID, pondremos el nombre de la sección que haremos pero el primero siempre debe de ser cuerpo colocamos el nombre y presionamos aceptar.Para hacer bien la pagina es necesario hacerlo con una buena estructura poniendo primero el nombre de la sección principal y luego el nombre de las cosas irán adentro de esa sección.
Paso 4:
Veremos que se muestra la etiqueta hacemos clic al final del nombre y volvemos a presionar el boton de "insertar etiqueta DIV" y pones el nombre de esa seccion en este caso se hará con el nombre de encabezado
Paso 5:
Como pueden ver el la imagen anterior debajo de la seccion de encabezado hay un espacio en blanco en ese espacio haremos clic y pondremos otra etiqueta en este caso con el nombre de Informacion y debe de quedar como la siguiente imagen
Paso 6:
Ahora que ya tenemos los nombre de las secciones principales podemos poner las secciones que van adentro, para eso hacemos clic en la seccion que se quiere empezar en este caso empezaremos en el de encabezado y presionamos enter y ponemos el nombre en este caso se usara logo y debe de quedar asi
Paso 7:
En el espacio que aparece abajo de logo se pone la otra etiqueta para que asi quede bien la estructura de la pagina a esta se le llamara Texto y se vera asi
Paso 8:
Ahora pondremos otra etiqueta para que en el encabezado se miren 3 diferentes cuadros en este caso agregaremos uno que se llamara imagen de la misma forma como pusimos el de logo que es hacer clic sobre el espacio en blanco debajo de texto y poner otra etiqueta
Paso 9:
Ahora cambiaremos a la seccion de informacion ya en esta solo pondremos dos etiquetas para hacerlo se sigue el mismo proceso que se hizo en la seccion de encabezado
Paso 10:
Ahora lo que haremos sera ponerle las medidas a cada etiqueta empezaremos con la de "cuerpo" para eso la seleccionamos haciendo clic en la linea que esta arriba del nombre y le damos al boton de nueva regla css
Paso 11:
Nos saldra un recuadro al cual solo se le da aceptar y luego aparecera otro cuadro en el cual seleccionamos la opcion cuadro
Paso 12:
En la opcion width que es la anchura ponemos el tamaño que se quiere en este caso pondremos 1000 y en height que es el largo pondremos 900
Paso 13:
Luego en la opcion de Fondo, que esta del lado en el que encotramos la opcion cuadro podemos elegir el color que se quiere en el cuadro pequeño que aparecese alli elegimos el color y le damos aceptar
Paso 14:
ahora veremos que la etiqueta cuerpo se hizo de la medida y el color que se puso, ahora debemos hacer el mismo procedimiento con la etiqueta encabezado solo un consejo es que se debe de poner la medida de la anchura que le pusimos antes a la etiqueta cuerpo y debe de quedar algo asi
Paso 15:
Ahora pondremos las 3 etiquetas que van dentro de encabezado alineados para eso seleccionamos uno de los nombre en este caso es logo y le damos de nuevo al boton de nueva regla css y pondremos las medidas solo que esta vez en la opcion que se llama Float pondremos left (es recomendable poner la misma medida del largo en todos los cuadros y la anchura poner medidas que sumando del el numeor que pusimos en el principio)
Paso 16:
Haremos el mismo proceso con los otros dos cuadros y al final nos debe de quedar algo como esto
Paso 17:
Para la seccion de Informacion se hace lo mismo de poner las medidas sin olvidar que se debe poner la misma medida de anchura que pusimos en la seccion cuerpo, y para la altura se debe de sumar ambas secciones de encabezado e informacion y que nos de la medida de la altura que pusimos de la seccion cuerpo que en este caso lo hicimos de 1000 de anchura y 900 de largo la etiqueta de cuerpo asi que la suma del encabezado y la informacion nos debe de dar 900 para que la altura quede exacta, siempre en la opcion de Float ponemos left y le ponemos diferentes colores para poder distinguirlo y al final debe de quedarnos asi
Espero que este tutorial les sirva y talvez a la primera vez no te salga perfecto ya que es cuestion de practica
Si tienes alguna duda puedes dejar un comentario con tu pregunta y yo te respondere
Hasta la proxima
