Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org.
This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html.
This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/

Avis

AB

I really enjoyed everything about this course. I thought the exercises/quizzes were fair and the instructor showed me many things that will serve me well going forward. Great course, great instructor!

HV

May 09, 2020

Filled StarFilled StarFilled StarFilled StarFilled Star

Through this Course i had learned how to create a basic web page and many more thing. I would like to thank my instructor for providing me such great material and methods to learn.\n\nthank you madam

À partir de la leçon

Week Three

Okay, you created a file...what now? This week we will begin by covering the important but often overlooked concepts of validation and accessibility. Did you follow the DOM structure when you created your page? Did you use semantic tags to make sure that page viewers can access all of the information, even if they have physical or cognitive disabilities? This is knowledge you can use if you would like to pursue a career as a web accessibility specialist. Finally I will briefly cover the steps needed to post your site to the web. There are many free and paid services that you can use to get your work off your computer and on to the Internet.

Enseigné par

Colleen van Lent, Ph.D.

Charles Russell Severance

Transcription

One of the things I'm really hoping that students will do is validate their code. You can validate it for syntax, but you can also validate it for accessibility. So, today I'm going to show you how I use the WAVE Tool to test different sites. I went in and I check to find some of the top 10 visited sites for 2018, and I found Google, Wikipedia, Reddit, Yahoo and, Amazon. So, let's just do a little investigation to how well each of these sites addresses accessibility. There's two ways to test. One is to actually go to the Wave site, which is wave.webaim.org. From this site, you can actually copy and paste the address of any page you want to test, and this is a great way to do it. Personally, what I did is I went ahead and added the wave extension to my page. So, if you look right here, it's possible if you own your computer to download an extension that looks just like this over here, this little tiny W, and it makes my life a little bit easier, because it lets me actually just click on this button rather than going to the Wave site. So, let's go ahead and check out some of these sites. I'm going to start with Google. I'm at Google, I'll click the "Wave validator", and it's going to go through and check for any errors that might see, and in this case, we have two errors. In both cases, the errors are that we have empty links. Somewhere on this page, there are links that don't really link to anything. Now, I'm trying to find them and you can't see them on here, but that's because Wave checks for all the different variations of your page. So, while it might look good on the desktop, it doesn't always look good on say, your phone or a mobile tablet. Google did pretty well. Let's go ahead and check out Wikipedia. Here on Wikipedia, I'm going to wave it. Sometimes, it takes a second, I always forget and I need to be really patient, because if you click on it and then you click on it again too quickly, that's how you turn it on and off. So, I clicked on wave, I'm going to wait for the few more seconds, and you can see that once again, Wikipedia, like Google, did a pretty good job of addressing accessibility. They have one empty button and what they call missing form labels. What that means is down here, there's some place they would like us to type something in. But, someone who is vision impaired might not know exactly what is it you want me to type in? So, both these little buttons right here say, "You know what? It would be a really good idea if you would add a form label, so somebody knows what it is they're typing in." The form label here might be search query, and the form label on this blue button might be hit me to perform search. Still, three is really good. So, let's go to Reddit. Reddit is a very popular site, a lot of people use it to feel better about themselves, because they think who would ask that question, and other people go here for real reasons to find out an information. It's such a popular site. I'm really hoping it'll be accessible. But according to Wave on their last rendition Reddit had, let's take a look. All right, and from here we can see that Reddit has 73 errors. Not surprisingly, because there's so much user-driven content. There's a lot of people uploading pictures or typing things in, and they don't know about accessibility. They don't know about things like, "Wow, I should really be adding my alt text to these different images." Otherwise it's going to be hard for people to access them. Or you can look down here. In fact, that's exactly what it is. It's missing alternative text here. Oops, missing alternative text here and missing alternative text. Lots and lots of missing alternative text. The another thing that Wave really tries to get people to avoid doing is having empty links. This idea of links that you don't know where they're going, and they also really don't like redundant links. Just makes it hard for people who are using the computer via keyboard to have to click so many times to just get to the same information over and over again. So, unfortunately, Reddit not great for accessibility, but really good for my example here in this video on checking your pages. The next one I'm going to do is, just said Yahoo in general. So, I picked a Yahoo Sports. We can take a look and see how this sport side is going. Now, unlike Reddit, this is professionally commercial software system where it's people who are being paid to upload the content. So, we'll hope that there's a little bit more accessibility here. So, here on Yahoo Sports, you can see that I've got 44 errors. So, that's just take a look at what general things they're missing. Well, it's alternative text, which is funny if you look at it, you can see that they're saying, "Ooh, lots of places you're missing alternative text, and that must mean right here each one of these little scores is not text, it's actually an image." This gets people into a lot of trouble. Sometimes, you want to put an image up on the screen and it's really not decorative, it's telling a complete story, and in that case, alternative text is so important. Otherwise, people with vision impairment may not be able to see what the score is for the various games. All right, the last one I'm going to do is Amazon, and I think I'll do that one straight from the WAVE Tool. So, I go here, I typed in Amazon.com, and Amazon is not doing too badly. You can see they have the same problems that most people do. It always comes down to this missing alternative text, right there. There's a few reasons for this. On some sites, the public is uploading the pictures, and they don't know about alternative texting, so we have to educate them about it. Sometimes, it's because we've written programs to update the sites, and unfortunately, computers aren't very good at knowing what alternative texts they should add to pictures. Unfortunately, it's also because some people do know and they just don't really care, think it's that important. So, as much as possible, I want you to add syntactic and semantic clues to all your code. Make sure people who are looking at it or listening to it have the greatest possible experience.