Creating Your Own HTML: Working with Tables

Loading...

Del curso dictado por University of California, Davis

Introduction to Web Development

276 calificaciones

University of California, Davis

Introduction to Web Development

276 calificaciones

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

De la lección

Designing Your Own Website: HTML Basics

In this module, we'll begin to explore how to design and create websites by exploring the base language used to power all websites: HTML. By the end of this lesson, you'll be able to: identify and use common HTML tags; add an image to a webpage; create HTML-formatted tables; use hyperlinks to connect a series of webpages; upload your finished HTML pages to a web host; and, learn some tips and tricks for styling pages and practicing your coding.

Module 2 Introduction1:33

Components and Structure of a Website2:49

Creating Your Own HTML: Setting Up a Template6:53

Creating Your Own HTML: Creating Links and Formatting Text9:58

Creating Your Own HTML: Working with Images8:50

Creating Your Own HTML: Working with Tables7:32

Creating HTML - How to Practice7:00

How to Put Your HTML on the Internet3:47

How to Test Your HTML5:39

Basic Styling in Webpages6:26

Conoce a los instructores

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[MUSIC]

Welcome back to our continuing discussion of HTML.

In this lesson we will talk a little bit about HTML tables and HTML comments.

So, first let's look at HTML table there are many ways for

us to format our data on an HTML page so that our users,

or our customers, or whoever looks at our pages are able to see it most easily.

And one of the most popular ways to do that is with a table.

So here I have a file similar to our others based on our template.

I've given it a title on line 11, or rather a heading on line 11.

And now I have a table structure, which is new to us.

If I click that in my editor it shows the closing tag,

which is the closing table tag down here.

And then this is a table very much like you would see

a table if you were to draw one on paper or draw one on a blackboard, or

if you're familiar with Excel, how an Excel spreadsheet might look, or

how a table in a document editor might look.

So to describe our table in HTML,

we need to tell the browser where the rows will be.

And this tr tag on line 14 and 16, this is the opening tag and

this is the closing tag with a slash.

This defines our table row, we have another table row, add another table row.

And within each row we have these td tags and td stands for table data.

So here we have one piece of table data,

two, three table data elements in this row.

What this is going to give us is a table with a row that has three boxes,

or three cells in it.

Now finally, this information in black in my editor, Day 1, Walking, 30 minutes.

Those are all the data in our table.

And we can just change these new information which shown in our table.

So my file is saved and

I am going to go to our

Actually close this, we'll go to HTML4 and we'll see our table here.

And there's in tabular form just as we saw it

in the file here but it's a little plain looking.

Now, we can change this quite a bit by modifying our table.

One thing we can do is we talked about attributes in some previous lessons.

We can give an attribute here for the border.

And in this case it's border and

1 and the 1 here goes in quotes.

So border="1", no spaces.

We'll save this.

Now I bet you can guess what will happen here when I refresh this page.

And we see that we have borders.

They may not be the borders we exactly expected.

These borders look a little bit more like window panes.

They're almost looking like raised borders.

But we can modify those pretty easily.

And there are almost endless ways to modify these.

But let's try first, Making this 2 instead of 1.

Go back or refresh, and notice that the borders got a little stronger with 2.

So I preferred it 1, I'm going to go back to 1.

But I would like a little bit more filled in.

So I'm going to use something called an inline style.

Now this is something we haven't seen before, but

we will see it again later in the class.

And so I'm going to type here border And

then a "solid".

Okay, so I am offering some style here for

this table and it has a border.

I'm saying I want the border to be solid.

Now I didn't make this up.

These styles for all kinds of HTML elements

are predefined and there are a great many of them.

So it's unlikely to meet someone who knows them all,

most of us know a fair number of them and when we don't we look them up.

So at this point, in your work with HTML and with styles,

you won't know many, except for maybe this one, border solid.

And you'll have to look them up more often, but

as time goes by you'll learn them.

At least the ones that you need to know.

Now we're going to refresh this page.

And notice that this looks much more solid at this point.

And I actually prefer it this way.

Now we can easily modify this table by taking this,

Table row, the tr tag copying it, and

I'm going to put it here, and maybe even another one there.

And I'll say Day 4, make them different, and Day 5.

And because I prefer resting to exercise,

I am going to leave those as resting as well.

And now when we save and refresh our table's going to change.

So you can see how manipulating and adding to a table is straightforward.

So to conclude our lesson today, I'm going to show you HTML comments.

So HTML allows us to put in comments

that are only for us as the developer.

This is my exercise,

table, So

this which is in green in my browser is a comment.

It starts with this less than sign and

the exclamation point and a dash dash and

then any text you'd like to type and another dash dash and a greater than sign.

And this will be ignored by the browser but

you can put any comments in here you like to help describe how your HTML is working.

Maybe you are partway through the work and

you want to make a note about what your plans will be this is how you do it.

And when we go back to the page and

refresh, notice that we don't see the comments.

We'll only be here in the HTML for you as the developer.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play