Olá, eu sou o Dr. Brown. E neste capítulo, vamos dar uma olhada no básico do HTML, ou linguagem de marcação de hipertexto, CSS, folhas de estilo em cascata, e uma introdução à programação Java. Vamos começar com uma olhada na linguagem de marcação de hipertexto, que é a base de todos os sites construídos hoje. HTML é uma linguagem de marcação de texto que consiste em uma série de tags definidas. Essas tags são usadas para estruturar o conteúdo em uma página da web. Usaremos o editor Notepad++ como mostrado aqui para criar nossa primeira página web. As páginas HTML têm uma estrutura definida que usa uma série de tags abertas e fechadas que são usados para marcar texto para ser exibido em nosso site. Começaremos afirmando que tipo de documento estamos criando usando a tag HTML DocType. Então, inserimos o especificador DocTyped como um documento HTML. Todas as tags são colocadas em um símbolo de acento circunflexo aberto e fechado. Em seguida, vamos inserir a próxima tag, que é a tag HTML, que incorpora o corpo da nossa página web. Como dito anteriormente, todas as tags de abertura têm uma tag de fechamento. Todas as tags de fechamento são prefixadas com a barra, para que o conteúdo do resto do nosso site será incluído dentro desta tag HTML aberta e fechada. Em seguida, especificaremos que temos um corpo para esta página da web usando a tag Body. Lembre-se, todas as tags de conteúdo deve ter uma tag de abertura e fechamento. À medida que construímos o conteúdo da nossa página web, todos esses conteúdos serão incluídos dentro do corpo. Em seguida, queremos alterar a cor de fundo da nossa página da web do branco ao azul em pó. Então vamos definir a cor de fundo do atributo style dentro da etiqueta Body para azul em pó. Então, o que fizemos está dentro da tag Body, definimos a cor de fundo do atributo style para azul em pó. Agora estamos prontos para começar a colocar texto em nossa página da web. Então vamos inserir o texto esta é minha primeira página web, mas vamos inseri-lo como um cabeçalho de Nível 1 usando uma tag de cabeçalho de nível 1. E também vamos centralizar esse texto em nossa página usando a tag Center. Tudo bem, então vemos aqui, temos a tag H1, Header 1, a tag de cabeçalho H1 de fechamento. Temos a tag Center, que centralizará este texto em nossa página, e a tag Center de fechamento. Posso empilhar tags em uma única linha. Só temos que lembrar que nossas tags de fechamento será na ordem inversa. Agora queremos inserir outra linha de texto como um cabeçalho de Nível 2 usando a tag de cabeçalho de Nível 2. Também queremos centralizar isso. Este texto irá afirmar, oh a estrada aberta. Como vemos aqui, temos um cabeçalho de Nível 2 centralizado. O texto indicará, oh a estrada aberta. Temos nossa tag central de fechamento seguido por nossa tag de fechamento do cabeçalho 2. Finalmente, queremos inserir uma imagem em nosso site porque nenhum site está completo sem alguma imagem. Então vamos usar a imagem JPEG da estrada incluídos no material do curso, e vamos centralizar isso na página também. Vamos definir o atributo de origem da imagem bem como o texto alternativo, a largura, e a altura da imagem. A imagem tem que estar na mesma pasta como onde a página da web é salva para que ela seja encontrada. Tudo bem, vamos ver que temos o centro, novamente, para centralizar o atributo de imagem. A origem está definida como estrada, esse JPEG. O texto alternativo será estrada. A largura será 500 e a altura será 600. E estes estão em pixels. Agora estamos prontos para salvar e executar nossa nova página da web. Temos que ter certeza de salvar a página da web como um documento HTML. Então vamos mudar nosso tipo Salvar como para HTML. E vamos chamar isso de Minha Primeira Página da Web. E podemos salvar o arquivo. Uma coisa que o Notepad++ faz é destacar algumas de suas palavras-chave, como estilo, fonte, alt, largura e altura, informa que você formatou isso corretamente. Então agora vamos executar nossa primeira página da web. Temos que localizar o arquivo que salvamos, e temos que mudar o tipo de arquivo para Todos os Arquivos para que ele encontre nosso arquivo HTML. E escolhemos MyFirstWebPage.html. E podemos ver que criamos nossa primeira página da web. Temos o texto do cabeçalho do Nível 1 que indica Esta é minha primeira página da Web. Temos o texto do cabeçalho do Nível 2, Oh The Open Road, e temos nossa imagem centralizada em nossa página. Obrigado por se juntar. Em seguida, seremos apresentados às folhas de estilo em cascata e seu uso em nosso desenvolvimento web.