html lab assignment

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

This lab has the following purposes:

• To familiarize you with many elements of HTML
• For you to gain further HTML and CSS authoring experience

LAB ASSIGNMENT:

You will complete this lab by following the directions below, filling out the Lab Form(s) for this lab when directed. The Lab Forms are Google Forms that save your answers.

For this lab assignment, you will continue work with an HTML file from the previous lab. Your will work together to link files together and explore various aspects of hyperlinks and CSS. The lab exercises below are designed to guide you through this process.

Students with Bb Learn accounts should complete this lab by filling out the Quiz Form for this lab. If you do not have a Bb Learn account, you should notify your TA so we can get one for you!

If you are completing this lab with Bb Learn , all answers you record on your lab sheet will be stored on the Bb Learn server. These will be accessible to you via your Bb Learn userid and password, regardless of whether you are logging in from home or the computer lab.

If you are unable to access your Bb Learn account today, you should use a text editor (such as " WordPad " or " NotePad++ ") to record your answers and save them on a diskette, so you may transfer them to your Bb Learn account later. If you don't have a diskette, you should be able to transfer them to your university web site for later access. If you are also unable to create your university website today, your teaching assistants should be able to save a copy of your work for later retrieval. Finally, if none of these options works, you should record information on a sheet of paper and enter the results into your Bb Learn account when it is available.

NOTE : Upon leaving the lab, be certain to remove all files containing any personal/account information, logout from any servers that have made use of your password, and close software connected to any of your accounts.

If you are in a room with whiteboards: (Friday labs): The scribe's machine should be attached to the projector at your table. Start up the computer at your table and the projector, and direct the projector toward the wall so that the image is clear and visible to your group members. You can use the provided markers to write on the portions of the walls covered by whiteboard material. Each member of your group should write their name (clearly) on the wall by your table. Choose a spot that does not interfere with the projected image. On your lab sheet, record the names of your group members (including yourself!!!) and indicate the name of the scribe. --> On your lab sheet, record the names of your fellow group members. Reminder: Remember to act professionally when working with your partners - treat them with the respect of knowledgeable co-workers on a job.   NewQuestion(); NewSection("Background","Background"); Prior to the start of this lab session, you should have completed the Pre-Lab exercise. You should have created an account on Codecademy and gone through a Unit on HTML and CSS. document.write("lab"+labNumber) for this lab exercise and placed a file inside it named " index.html " . You should also have brought The Analytical Engine CD with you to lab for part of your exercise. -->Discuss the pre-Lab exercise with your fellow members and compare answers to the questions. On your lab sheet, describe any difficulties you had with the pre-Lab and whether your group members had similar difficulties. NewQuestion(); NewSection("Group","Group Exercise"); For all HTML work in this laboratory exercise, you are to use your ShowURLinTarget(" Mozilla Thimble ","https://thimble.mozilla.org/en-US/","_mt") Microsoft FrontPage --> account. NewStep() After logging in, select "Your Projects", then instead of selecting the"Published Project" link next to your previous lab, select "Remix". This way, any changes you make to it today will not affect your previous work. NewStep() Next, you should Publish the page, so that you can share the link with your fellow members. For "Project Description", add the text "Version 2" or something similar, so that you will be able to tell which project is the newest version. As you update your page through this lab, you should continue to publish the published page, RATHER THAN REMIX IT AGAIN. On your lab sheet, record the URL for your newly-published page. NOTE : the link Thimble gives you to share is actually the folder name of the folder that contains your web page. The page itself is actually named " index.html ". So, for instance, if your URL is given as https://thimbleprojects.org/yourname/123456/ , the true URL of your file is https://thimbleprojects.org/yourname/123456/index.html . The default page name for any folder is index.html . NewStep() Each member of your group will edit their HTML page on their own machine so that below the table with the pictures, it contains links to each of your fellow group members' newly-published pages. absolute links to the pages, and give the entire path name of the file, e.g., http://...../ document.write("lab"+labNumber) /index.html ). -->Put a header above the set of links that says " Exercise I " and put a horizontal rule after it. NewStep() At the top of the document, in the head section, give your page a title that shows your group number, lab section number, and that this is lab document.write(labNumber) . Make sure all links work properly before moving to the next step. On your lab sheet, each of you should indicate completing this step. NewQuestion() Your group should create a new section on your HTML page that contains a new set of links to the same group members' pages. This time, however, instead of giving the entire path name, do not specify " index.html " as the file (e.g., simply use http://...../ document.write("lab"+labNumber) ). Put a header above the set of links that says "Exercise II" and put a horizontal rule after it. Make sure all links work properly. Next, some of your group members (but not all of them) should visit their websites via SSH and change the names of their files from " index.html " to " index.htm ". Make sure the links still work. Discuss what you think will happen if your document.write("lab"+labNumber) folder contains both a file named " index.html " and another named " index.htm ". Then upload suitably modified files to your websites with the appropriate names in order to test your hypothesis. (It should not be necessary for all of you to upload files in order to test this.) On your lab sheets, describe the outcome of this experiment, and how it agrees or disagrees with your expectations. NewQuestion() Discuss what you think will happen if you upload to your document.write("lab"+labNumber) folder another suitably modified file, then change the file's name to " INDEX.html " (note capitalization). Then test your experiment. On your lab sheet, explain the outcome, and how it agrees or disagrees with your expectations. NewQuestion() Now, discuss what you think will happen if you use SSH to download your document.write("lab"+labNumber) folder from the dunx1 server to your local machine. Then test your experiment. Discuss the outcome, then explain the outcome on your lab sheet. Before continuing to the next section, each of you should make sure that you restore the name of your original index.html file, renaming (or removing) other files as necessary. --> NewStep() Your group should now create another new section on your HTML page containing yet another a new set of links to your group members' pages. This time, however, put the links in an unordered list . Put a header above the set of links that says " Exercise II " and put a horizontal rule after it. Make sure all links work properly. Once these links have been tested, create a second list of links as an ordered list (after the first set, but before the horizontal rule). Experiment with different styles of lists (numbered, lettered, roman numerals). Describe the outcome on your lab sheet. NewQuestion() ShowImageWithAttributes("url.png","WIDTH=182 HEIGHT=155 ALIGN=right") Now, each of you is to modify your index.html page so that it contains links to the pages of the other members of your group. You should create a relative link to each group member's page. This means that rather than specify the complete URL to the page (as you did in previous steps), you can simply describe how to get to that page from yours. For instance, if your page's URL is http://www.pages.drexel.edu/~aen42/lab1.html and their page's URL is http://www.pages.drexel.edu/~hpv38/lab1.html (as in the figure at the right), you do not need to re-state that both pages are on the same server (whose address is http://www.pages.drexel.edu/ ). You simply need to describe that the page is reachable by: going up one level in the folder hierarchy (signified by " ../ "), then entering the ~hpv38 folder, then accessing the lab1.html file. Thus, the link is described as " ../~hpv38/lab1.html " and the complete link reference is <A HREF="../~hpv38/lab1.html">My friend's file</A> . Of course, your index.html file is in the document.write("lab"+labNumber) directory and so a link from that file has a slightly more complex structure than a link from your lab1.html file. Your group should discuss what the appropriate form for these relative links is, then each of you should make the changes to your own pages, upload them, and test the links. Put a header above the set of links that says "Exercise IV" and put a horizontal rule after it. Continue working together until everyone's links work. Record the appropriate link on your lab sheet. JUST SHOW THE PART THAT BEGINS "HREF=..." NewQuestion() TUTORIAL -->   NewQuestion(); NewSection("analenginetext","Text Processing"); NewStep(); The next part of this lab is a tutorial. For this part, each of you is to perform the steps of the tutorial individually on your own machine; however, you and your group should confer and stay in step so that you may complete the remaining exercises together. In this section, you will insert content into your index.html page. This section concentrates on how text gets presented and formatted. NOTE : When we ask you to "add something to your page," we mean that you should add code to your HTML file, verify that the page looks like you want it to and, if it doesn't - repeat the process." ShowURLinTarget("Exercise Bike Exercise", "Bike/index.html","_EBE") Notice that a window opens containing side-by-side frames. One frame provides a view of an HTML file describing the source code for a page in the course notes, and the other shows what the code looks like when it is interpreted by your browser.--> Visit the Thimble page https://thimbleprojects.org/jpopyack/326655/ and REMIX it. NewStep() For each of the following items, look at the text portion of the page, scroll through the highlighted HTML code to see which tags produce which portions of the text, and record the answers on your lab sheet. the header for the article the colored text with the author's name italicized words for the three exercise modes underlined text indicating a range of numbers on the keypad the font used for the subheaders (most of the subheaders, anyway) the horizontal rule used after the author's name the ordered list of items lettered a,b,c,d the image of the bike NOTE: Please enter your answers as "H2", not "<H2>", etc. , otherwise your answers will be interpreted as actual HTML instructions by the system rather than as your answers to the questions. --> NewStep() Using what you have learned, go back to the index.html page you were working on earlier, to describe yourself and your interests. Include 2 or more paragraphs. You are, of course, free to write whatever you wish (remembering that others, probably including your instructor for this course, will be reading what you write). For the sake of these exercises, though, be sure to include the following stylistic elements. When finished, indicate that you have completed this step. text that is underlined text in bold face some italicized text at least two different fonts --> at least two different headers, at different levels at least two horizontal rules NewQuestion(); NewSection("analenginehyper","Getting Hyper"); NewStep(); While HTML provides reasonable means for formatting and displaying text, most of us rely on WYSIWYG word processors for these tasks. What HTML excels in, though, and probably the real reason for its explosive growth, is its ability to make both text and images hyper - so that clicking on them changes what you're viewing. HTML links and anchors allow you to be transported to another place in the current page, or to another page altogether, depending upon how they are defined. NewStep() Return to the Exercise Bike Exercise . Skip to the next step - Mozilla Thimble has an issue with internal links, so this step will be difficult -->- This file contains internal links (which allow you to navigate to "anchors" within the page) and a relative link to a picture. Some of the internal links are not functioning correctly - find the errors and fix these. NewStep() Using a search engine, find another exercise bike image on the web and include that image on your page by inserting an image tag with a direct link to its URL. Place it so that the new photo is shown beside the original drawing of the bike at the top of the page. How do the sizes of the images compare? Is one taller than the other? Is one wider than the other? Look at the CSS file "styles.css", and notice that the code at that bottom that says img { max-width: 300px; } This places some formatting restrictions on all occurrences of the img tag. What it means is that all images will be rescaled if needed so that they are not more than 300 pixels wide. It would probably be a good idea to add a piece of code so that images are similarly restricted to a certain height. What do you think the command is that does that? How high is a reasonable amount? Experiment with this. When finished, summarize your activities working with links and images on your lab sheet. NewStep() index.html page. Again, you are free to add as many such elements as you wish, for the sake of developing your HTML expertise. Include at least the following: two links to points within the page (for example, to different headings or sections of the document), a link to your lab1.html page, a link to the ShowURLinTarget("DUCSTeach web site", "http://ducsteach.org/","_ducs") a link to one of your favorite Web sites (not including the DUCSTeach web site!!!) --> For this exercise, you will create a new HTML document and store it in the same folder as your Exercise Bike page. It doesn't have to be anything elaborate - our purpose is to show how to create two files in the same folder and link them, which is a requirement of the first homework assignment: In the leftmost column of the Mozilla Thimble page, select the "New File icon". This appears to the right of the word "FILES" near the top. Select "Add HTML file". This will create something called index-2.html . Edit this file by clicking on it. At the bottom of the code, add the line <a href="index.html">Link to Main Page</a> This creates a link back to index.html , the Exercise Bike page. Verify this. You can also add a similar link to the bottom of the Exercise Bike page that links to index-2.html . Do this now, and verify that it works. Notice that neither of these files is referred to by a fully-instantiated HTTP request, i.e., https://thimbleprojects.org/yourname/123456/index.html . Because they are stored in the same folder, they may reference each other simply by name. We will study relative links in the future. On your lab sheet, describe your experience with links (don't write the actual code). NewSection("xml","eXtensible Markup Language (XML)"); NewQuestion(); Although it can provide a reasonable set of capabilities for presenting and formatting information in a simple manner, HTML has shortcomings also. XML addresses these. XML is often described as a metalanguage , or a language used to describe other languages! XML uses tags in a manner similar to HTML. The designer is free to create tags that describe the content, however, as in the simple example below (from http://en.wikipedia.org/wiki/XML ): <?xml version="1.0" encoding="UTF-8"?> <Recipe name="bread" prep_time="5 mins" cook_time="3 hours"> <title>Basic bread</title> <ingredient amount="3" unit="cups">Flour</ingredient> <ingredient amount="0.25" unit="ounce">Yeast</ingredient> <ingredient amount="1.5" unit="cups">Warm Water</ingredient> <ingredient amount="1" unit="teaspoon">Salt</ingredient> <Instructions> <step>Mix all ingredients together, and knead thoroughly.</step> <step>Cover with a cloth, and leave for one hour in warm room.</step> <step>Knead again, place in a tin, and then bake in the oven.</step> </Instructions> </Recipe>

On your lab sheet, answer the following questions:

• How can a browser tell that there is a relationship between these two files?
• Suppose the XSL file is not present - what happens when the XML file is opened with a browser?
• add another section to the book
• change the formatting for labs so that they are underlined
• add another section type (Summary) so that a section can be Text, Lab, or Bibliography.
• Format a Bibliography section in bold italic.

Make these changes (you may make up your own data for the Bibliography), and summarize the results on your lab sheet.

Visit the Thimble page https://thimbleprojects.org/jpopyack/393939/ and REMIX it. This file represents a card from the UK version of the popular Monopoly game, along with an image of the card it represents. This file resembles the original, but some information is incorrect or missing, and the formatting is on the right track, but not ideal. You are to make corrections to the code in order to reformat the page so that its appearance matches the original as closely as possible.

To do this, you and your group should discuss the following questions, record your answers on your lab sheets, and make corrections as needed:

• What value needs to be changed in order to make the box fit the card properly? Make the change.
• Determine the purposes of each of the attributes ( border , padding , margin , and width ), and whether any of these need to be changed, or should stay as they are.
• What causes the text to be centered?
• How are the colors of the text, the background and border specified? Are these colors case sensitive? (i.e., does it matter whether they are in upper case, lower case, or mixed case?)
• The cell padding appears to be too great. Find a more appropriate value.
• What is the purpose of colspan="2" ?
• Change the words and capitalization as needed.
• Note that the font size for this line is smaller than the default. That is a good idea, but find a more appropriate value.
• What do you think " letter-spacing " does? Experiment and find a more appropriate value.
• Figure out how to center the top line of the next section.
• Add additional rows for "3 Houses" and "4 Houses", as appropriate. Notice that these rows do not use colspan="2" . Why?
• In the style.css sheet, the indentation from left and right margins needs to be fixed for td elements.
• Likeiwse, the amount of white space between lines needs to be fixed.

Make any other needed changes to your card, then publish it. On your lab sheet, record the URL for the published card.

To fix this, we will add some CSS styling information and separate the formatting from the content. In some ways, this is similar to the concept of factoring in mathematical formulas.

ut a header above the set of links that says "Table Exercise" and put a horizontal rule after it. Continue working together until everyone's table is completed. When finished, describe the design considerations you felt were most important for the visual appeal of your table.

a { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }

This says that every anchor (i.e., <a href= ...>text</a> ) should be formatted with the Arial font (with some other choices if Arial is not available on the machine that is rendering the page, and the size should be smaller than the main body text. You can now remove the font tags that surround each anchor, which say <font SIZE="-1" FACE="Arial, Helvetica, sans-serif">... </font> . These tags are redundant because their common style has been "factored out" and defined as a style associated with anchors. You may also find it useful to insert some line breaks in order to make the source code more readable. This will not change the way it looks in your browser, but anyone who has to read and modify your code should find it easier to work with.

• What is the symbol ^ used for?
• What does \pm do?
• What does \sqrt do?
• What does \over do?

<!-- PLACE YOUR OWN CODE IN THE SPACE BELOW WITH YOUR ANSWERS TO THE LAB QUESTIONS -->

Beneath this appear several blank lines, where you will place code for the following tasks. For each task, make sure you have a correct solution before moving to the next task:

• Insert the code $\frac{dy}{dx}$ signfies "the derivative of y with respect to $x$.
• In the code you inserted, notice that the variable x appears in a special font, but y does not. Figure out why, and make the change.
• Using the \frac utility, create a fraction that shows the value 1 in the numerator, and 2n+1 in the denominator.
• Apparently, any mathematical expression can be placed inside the brackets delimiters { } , including another \frac expression. Place a fraction on a separate line that contains 3 n in the numerator. For the denominator, use an expression equal to 1 more than the fraction expressed in part (c) above.

Show the needed code on your lab sheet.

HTML ( HyperText Markup Language ) is the predominant language used to define pages on the World Wide Web. The most useful features of HTML are the ability to format text and the ability to specify links to other documents. Our purposes for studying HTML are to examine the concept of a computer language as a set of instructions to be executed, written according to rules (i.e., a grammar ) that allow the computer to understand them; to provide a foundation for study of JavaScript in the future. Our purpose is not to study HTML in depth (although you are encouraged to do so on your own), but rather to examine the elements of a programming language. Likewise, the exercise with tables and colors is intended to provide some further experience with HTML language elements -- we will see later that there are good reasons to separate the concepts of table structure from those of table formatting by using Cascading Style Sheets, and so will revisit these ideas in a future exercise.  

Lab 1: HTML and CSS

This lab is on Wednesday, February 15, 2017 at 7:30 P.M. in 32-082. This is a non-compulsory programming lab to introduce students to webpage building with HTML and CSS. View the source of this page to see a nicely documented solution to the exercises below.

Last Updated : Sun, Jan 31 2015 at 10:30 P.M.

In this programming lab, you will be completing a series of exercises that will help you structure and style web pages.

Required Resources

• HTML reference
• CSS reference
• A condensed CSS primer by 6.831 staff (It is a Google Presentation, and comments are allowed.)

Learning HTML

Exercise 0: set up the barebones of doggo's website.

• Learn about HTML tags .
• Set up the header and body of your HTML file.
• Link Bootstrap.

Exercise 1: Set up the "About Me" section

• Learn about divs and classes.
• Learn about Bootstrap's grid system
• Add a header, image, and link.

Exercise 2: Finish setting up the other sections yourself.

• Add a table with your classes.
• Add a list with your extracurriculars.
• Add a form that people can use to contact you with.

Learning CSS

Exercise 3: add and style a table of courses.

Modify the page to include a table of courses you are taking and have taken. Here are some examples of simple tables . Your table should have:

• three columns: course number, course title, and semester taken
• two vertical sections, with headers for courses taken 'For Credit' and as 'Listener'
• alternating row background colors, so it's easy to read
• green colored text if the class is currently being taken

Exercise 4: Make it your own

Try out adding:

• different fonts
• a cool background
• anything your creative mind can think of!

Exercise 5: Codecademy Exercises

Do the projects on the Codecademy website .

Reset the Score?

This will reset the score of ALL 106 exercises.

Are you sure you want to continue?

Congratulations!

You have finished all 106 html exercises..

Share your score:

Get Certified!

Take our HTML Developer Certificate to prove that you have fundamental knowledge of web development using HTML.

Assignment 1: Static Web: HTML/CSS

Due Sunday, February 7 11:59pm ET

Accept the Github Classroom assignment and clone this repo that contains stencil code for Assignment 1.

Introduction

This is a multi-part assignment with the objective of making you comfortable working with HTML and CSS. By the end of this assignment, you will have styled some rectangular blocks and created a simple version of Twitter's home page.

If this assignment seems overwhelming to you, please come see a TA at TA hours to talk through some strategies for tackling it. We expect this assignment to be a time-consuming assignment as we cover a lot of fundamental techiniques. But with a good strategy, it can be finished in a reasonable amount of time.

Note: Only CSS and HTML will be used for this assignment. If you want to use JavaScript (or libraries such as jQuery) then feel free to, but we will only be grading correctness on your CSS and HTML.

If you can, Start Early!

Specifications

Now that you understand some of the basics of HTML and CSS, let’s take a look at how to align HTML elements. There are multiple ways to align HTML elements, but in this part, we recommend using flexboxes as they are widely used in modern web development (for example BootstrapV4 is built on top of flexboxes).

Refer to this great webpage on how to use flexboxes: CSS Flexbox Guide .

Also feel free to use online resources such as Stack Overflow, MDN, W3, and Google for reference.

As you can see, there are 9 rectangles. The styling and makeup of the first two rectangles are already built for you. Your task is to apply stylings and add div elements inside of the next 7 green rectangular blocks to create a webpage that looks like this:

For the third row, the red and blue end rectangles should remain the same width, and the green space should shrink.

Possible Approach: Have a div with a red background and a div with a blue background, both with fixed width. Use an appropriate value for Justify Content .

For the fourth row, the blue end rectangle should remain the same width, and the red rectangle should shrink.

Possible Approach: Have a div with a red background and a div with a blue background. Have a fixed width on the blue div. Use Flex Grow .

For the fifth row, the red square should remain the same size, but always remain in the center of the green rectangle.

Hint: Think about how to keep a div fixed size and how to align something in the absolute center of the parent element.

For the sixth row, the blue rectangle should remain the same size, while the red rectangles should shrink. The blue rectangle should remain in the center of the row.

Hint: Use two red divs.

For the seventh row, the red rectangle should remain the same width.

Hint: Nest divs and use background-color: transparent

For the eighth row, the orange rectangles should remain the same size while the green space between them shrinks.

For the ninth row, the green space between the orange rectangles should remain the same width while the orange rectangles narrow.

The examples we provided with the first two rectangular blocks use flexboxes. You are not required to use flexboxes for the next 7 rows, but we recommend it as it will also be useful in part 2 of this assignment.

You should only have to use the div html element to complete this assignment. Also, none of the divs you create inside of the provided wrapper divs should have background-color: green; . But it is valid to specify non-green background colors for any divs, including the wrapper.

• The color of the boxes we used are background-color: red , blue , and orange
• Some width/height values we used are 20px, 40px, 80px

You are not required to use Bootstrap in this part. You can use if you want, but we actually recommend writing plain CSS. Just for this part, inline CSS is acceptable, but you should generally avoid using inline CSS in the future.

Any images you'll need can be found in the part2/images folder, which can be referenced as ./images (when CSS is in its own file, URLs are relative to the CSS file, not the page it is loaded on). All of your HTML should go in the index.html file and all of your CSS should go in the index.css file.

Feel free to go on Twitter and use your browser’s inspect element to see how they do font sizes, font weights, margins, paddings, text colors, and background colors (use inspector). Our solution is a bit different than Twitter’s architecture because twitter’s HTML/CSS setup is way too complicated for a simple web mockup. If you try to copy Twitter’s code instead of creating the HTML elements yourself, you’ll end up spending way more time trying to figure out what each div does and how to decipher their massive styling code base.

Ethics Requirements

A screen reader needs to know in advance what language your website is in in order to function properly.

To help it out, make sure to declare the language of your website in the lang= attribute of the html tag.

Blind and low-sighted users often can’t see images on a site.

• To help them enjoy your site’s content, all images must have alt text.
• The alt text goes in the alt="..." attribute of the image element.
• You should give a basic description of what is in the image. Putting image in the alt attribute does not count!

Blind or low-sighted users may want to “skim through” a page using their screen reader. To make that easier, the page should have a logical hierarchy using different headings to designate different levels of importance.

Note: your Twitter page won’t have that many headings. Just don’t use headings to style things!

If you want a piece of text that isn’t a heading to be big or bold, use HTML elements like em and b tag or CSS to style it rather than the heading attribute.

For people using screen readers to navigate the page, ARIA landmarks are a big help – they can help users skim the page, or to quickly find the content they need. These are attributes that can be added to any element on the page and appear as role= attributes within a div’s opening tag. The ARIA landmarks you are required to include are:

• role=navigation (to designate the navigation menu): add this to the navigation bar.
• role=main (main page content, i.e. the tweets): add this to the div you use to contain your tweets.

Look here for more tips and examples.

Finally, your page should have a skip link (think <a> !) somewhere at the top of the navigation. Skip links are links at the top of the page which allow a user to skip to the main content of the page. They’re important for older browsers and screen readers that may not support ARIA landmark navigation.

• This can be styled any way you like! However, for this project, hide them using display: none; .
• To do this, you’ll have to give the div you will be jumping to an ID, and have the link href="..." attribute point to that div’s ID. For example, if I wanted to jump to a div with the ID myDiv, I would have the following link: <a href=”#myDiv”>Jump to myDiv</a>
• In our case, this means skipping to content-wrapper or content-center , depending on your implementation. More tips and examples can be found here .

We recommend running your page through WAVE’s accessibility checker, which we asked you to add to your Firefox and/or Chrome browsers during lab 1. We’ll be using that tool to test whether your ARIA landmarks and general hierarchy are logical, as well as whether you’ve implemented alt text in your image descriptions.

Note: The Chrome WAVE extension has been a little finicky lately. If you’re having trouble, try running your code on a department machine and/or using Firefox.

For help, take a look at our Accessibility Resource Sheet in Docs or come to TA hours!

Functionality Requirements

In the following, we put together some hints on how to accomplish the functionality requirements. We also encourage you to refer to online resources like MDN and CSSTricks for HTML and CSS properties.

Note: Don't worry about getting the font sizes or font colors exact. That being said, #4AB3F4 is the blue color used in the mockup and #E6ECF0 is the light gray background color.

Twitter's header is fixed which means when you scroll down, the header remains at the top of the webpage. We will require you to implement your header in a similar manner. To do this, use:

• position: fixed; Adding this to an element makes it stick to whatever position you specify
• top: 0; left: 0; These are the positions for the fixed element that will keep the element fixed at the top
• z-index: 100; Adding this to an element makes it positioned above other elements (You could probably make it work with z-index: 5, but we put 100 just to make sure). Elements without a specified z-index have a default z-index of 0. Elements with higher z-indexes are placed over elements with lower z-indexes.

If you decide to use Bootstrap, you may find Navbar Placement to be useful.

Lastly, we require you to have the Twitter logo stay in the middle of the header when you resize the window.

• Home <i class="fas fa-home"></i>
• Moments <i class="fas fa-hashtag"></i>
• Notifications <i class="far fa-bell"></i>
• Messages <i class="far fa-envelope"></i>

The file path of the twitter logo is ./images/twitter-logo.png

content-wrapper

• max-width: 1190px; This sets the maximum width of the element.
• margin: 56px auto; This sets the vertical margins to 56px so that it is below the header and the horizontal margins to automatically center the element.

content-left

• Cover picture (purple)
• Profile picture (orange)
• Profile stats (green)

We require you to create the overlapping effect between the profile picture and cover picture. Usually to sepcify priority in stacked display (think it as layers), you will use z-index .

Bootstrap section for positioning

• The filepath of the cover picture is ./images/ratatouille-banner.png while ./images/ratatouille.jpg is the filepath of the profile picture for Remy and ./images/linguini.png is the filepath of Linguini's profile picture.

content-center

We require that you include the profile picture in every one of the tweets. Additionally, in at least one of the tweets you should have a span tag to change the styling of a single word within the tweet.

border-radius: 50%; or Bootstrap class rounded-circle makes an element a circle.

content-right

If you minimize the width of your browser when on Twitter, you will notice that the content on the right disappears at a certain point. This is done using CSS media queries.

We require you to do the same on your mockup. So, use a media query to make content-right disappear when the window’s width is less than or equal to 1200px.

Other than the explicitly stated requirements for this part, we would like you to make your Twitter mockup generally resemble the solution provided above

If you can, please make your webpage compliant across browsers. But we will be testing your assignment on Chrome.

To access Chrome in CIT machine: From the command-line, type chrome .

General Notes

As a reminder, it's a good idea to run your HTML and CSS syntax through validators. You should also consider using an accessibility checker such as WAVE.

Troubleshooting

There are hundreds of HTML and CSS tags, properties, and values, and CS132 does not expect students to learn each one by heart. However, this assignment and the first lab are intended for you to intuitively understand the languages, and to be proficient at knowing how to tackle a design by the end of the semester.

If you’re having problems, there are many guides on HTML and CSS online (CSSTricks and MDN are your friends), as well as on our resources page.

As always, if you are stuck on a particular part, you can always talk to the friendly TAs or ask questions on course piazza (check your email for a signup link).

As a general rule of thumb, do not expect TAs to be able to solve every web problem you have. Even the most adept web developer can struggle a lot with specific CSS rules to use.

To hand in your code for Assignment 1, upload the directory containing your solution to part 1 and part 2 to Gradescope .

Lab 2: First HTML Webpage

Due: saturday, january 28, 2023.

The purpose of this assignment is to practice writing basic HTML. In this assignment, you will create a new HTML file and load it with “dummy” content. Then you will markup the content with HTML tags. And finally, you will upload the HTML file to your account on the web server. You will need to remember your FTP account information from Lab 1.

Step 1: Create a new HTML file

• On your desktop (or anywhere on your computer's file system) create a folder titled: lab02
• Inside the lab02 folder, create a folder titled images
• Inside the lab02 folder (not the images folder) create a new HTML file named start.html
• Into your code editor, copy the following code exactly: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lab 02</title> </head> <body> </body> </html>
• Save your file – and generally speaking, save often!

Step 2: Add content to your web page

For this assignment, you can use the "comp" provided (see last page of this document) as a guide to gather some “Lorem Ipsum” text and a “FPO” images. It doesn’t really matter if your webpage looks exactly like the comp. You only need to use it as a guide. (In fact, it’d be better if you experimented with some different content to get a feel for how it works.)

Prep: Gather some placeholder content

• Get some placeholder text (a.k.a dummy text or lorem ipsum) and keep it handy.
• Get an FPO image (FPO stands for For Position Only ); for our purposes, you need a small image, no wider than say 300 pixels or so, and the file type must be: jpg , png or gif .

Start filling your HTML file with content

• Using the comp at the end of this document as a guide, you will write and paste text into your open HTML file (in your code editor) inside the one <body> tag in the HTML.
• Your goal is to make it look like (but it doesn’t have to be exactly) like the comp .
• Write or copy & paste plain text into your HTML document between the <body> tags. You can start by typing something like this between the <body> tags: <h1>Hello World!</h1>
• Be sure you indent the H1 within the open/close BODY tags.
• Save your HTML file, toggle back to your lab02 folder and double click your start.html file. The file will open in a web browser – whatever is the default web browser for your computer. There, you should see something like this:

• For the rest of this section, you will continue to write or copy & paste text into your HTML document, always between the one set of <body> tags. (You can use any bits and pieces of the placeholder text – the lorem ipsum stuff – where ever you want.) As you go, you will need to add “markup” (the tags) to the content.
• First level heading
• Second level heading
• Bold (strong) (Note: do not ever use the <b> tag)
• Italic (emphasis) (Note: do not ever use the <i> tag)
• A link to an inline image (hint: your “src” will be something like "images/cat.jpg", you will also need to create an "alt", something like "my cat", do not use a height="" or width="" attribute on your image tag Even though w3schools.com shows an example of an IMG element that uses the height and width attributes, do NOT use them! (To be explained in a future lecture.)
• A hyperlink to another website (hint: your “href” will be something like `http://www.google.com`)
• An unordered list
• An ordered list
• An HTML comment (note: you will not see the comment in the web browser)
• As you write your code. Use lots of white space in the code! Make sure you indent and space your HTML tags appropriately to make it easy to read the code.

In general, the process is to write some code in the code editor, save it, then toggle to your web browser and refresh the browser. You will see your edits in the web browser and you will figure out what you need to do next. Then, you then toggle back to your code editor and start the process over.

Step 3: Upload your work

• When you are done with your webpage, use your FTP software to access your account on csc170.com (remember your FTP login information?) and upload your files:
• Open the FTP software and login to your account using the login credentials you used in Lab 1.
• Drag your lab02 folder into the online area in your FTP tool. The result will put all your files and folders on the server.
• In a web browser (any), go to this address to check your handiwork:
• www.csc170.com/accountname/lab02/start.html (where accountname is your account name)
• Step 4: Report your work
• In our CSC 170 section in Blackboard, in Lab 2: First HTML Webpage , post a link to your webpage to receive credit for this lab assignment

Below is a comp to guide the design of your webpage. Remember: it is not important to make your webpage look like this. In fact, this is a good time to do some experimentation.

What's covered in this module

• Organizing Website Files and Folders

HTML Tags and Elements

• The Framework for a Web Page

HTML Text Markup

Making lists with html, html semantic elements, the <div> element, html entities and the copyright symbol.

• Website Links with the Anchor tag <a>

Final Template

Frequently asked questions, in this module, enjoy the challenge of coding.

In Module 2, we learn how to set up a web page in HTML and how to do text markup. At the end of this introduction to HTML you will have a great start at learning a coding language!

Learning a new coding language can be challenging, but life is full of challenges and this is one that will pay off for you. But before we begin, let’s review some things you can do if you start to feel overwhelmed with this new challenge:

• Positive Self-Talk—Believe that you can do it! 
• See the challenge as a part of meeting a future goal
• Send yourself positive messages in code. For example, type <h1>I can do this!</h1> in a text editor and look at it in the browser.
• Rest and try again later
• Ask a friend for help. Help your friend. 

You can also try doing a Power Pose. There is some preliminary research into the pose and whether it can help you work through a challenge. (It won’t hurt to try it.)

Folders and Files

Management of website folders and files will be a repeating theme in this course. Websites are a set of folders and files that work together to make a website. What this means is that you need to be fastidiously organized with your website folders and files.

Why do we have to keep our website files organized? Because the website files refer to each other, and you need to know where they are. I have assisted hundreds of students with their websites, and I have found that the most likely reason your website doesn’t work is because you don’t have your folders and files organized. It can be quite a mess to clean up involving a lot of rework.

Good Folder and File Names

Website developers have rules for creating file names. Some of the reasons are by convention and some to avoid problems. 

•  Use only lowercase letters (a-z), numbers (0-9) and put a dash between each word. 
• Never use spaces or special characters, except a dash. 
• Put a dash between each word. This helps Google search bots in reading your folder or file name. 

Note: In other programing languages you may use camelCase or underscores. Do not use these in folder and file names for HTML and CSS. Use a dash between words.  

Good folder names

• susan-metoxen
• portfolio-website

Bad folder names

• Susan Metoxen – uses capital letters and a space
• myclassfolder – no dash between the words
• susan_metoxen – uses an underscore instead of a dash. This is used in other programming languages, but not for website files and folders
• susanMetoxen – uses camelCase, which is ok in other programming languages but not for website files and folders

Why can’t you use a space in folder and file names for websites?

The file and folder names appear in the URL for the web page. Every time you insert a space, the browser must change the space to “%20”. This is sloppy, and also can backfire in programming. For example a folder name like this:

my project name

Would appear in a URL like this:

Every time a space is used, the URL needs to replace the space with “%20”. That is why web developers never use spaces in folder and file names.

Every Website Has Its Own Folder

On your computer, decide where to place your overall “websites” folder. Placing it in the Documents folder is a good idea. Remember where you placed it. 

Each website you make will have its own folder. Last week we made a file called, “resume.html” and we will create a folder for it called, “portfolio.

Today we will create a “templates” and a “pacific” folder for two new websites. 

Watch Video Demonstration

In this video, I show you how to organize your websites into a folder named “websites” and create a folder for each “website” that you make. It also shows you how to create a file from Sublime Text and save it into the correct website folder.

Exercise: Organize Folders

Just like in the video, you need to set up your website folders for class.

• Create a folder for your websites called, “websites”
• Create a folder inside your websites folder called “portfolio” on your computer or flash drive. It must be all lowercase and no special characters except a dash. 
• Find the resume.html file from last week and move it into the “portfolio” folder. 
• Inside your “websites” create another folder called “pacific”. We will use that for the lab for this week.
• Create another folder called “templates”
• Open your text editor, and create a file called “template.html” or “index.html” and save it in your “templates” folder. (In Windows, be sure to save as an html file.)

What is HTML?

• HTML is a markup language. The acronym stands for Hypertext Markup Language.
• The <p> and </p> tags are the markup

HTML Element and Tags

We learned this last week, but these are the HTML tags.

The HTML Element is both tags and everything between them.

The Framework of a Web Page

There is a certain way you must set up the code in a webpage. This is the hardest part of this module, so hang in there while we get through it. We are going to put all of this into a template so that you won’t have to remember all of it every time you make a website.

DOCTYPE is short for Document Type Definition. At the top of every website you need to define the type of document. We define our website as HTML.

Before HTML5, we had a much longer DOCTYPE that you may run into on older websites. It looks like this:

If you run into this older DOCTYPE you should change it to <!DOCTYPE html> since the code is obsolete.

2. <html></html>

Next on your website you will have the <html> tags. The first tag goes directly after the DOCTYPE, and the closing tag will be the very last thing on your web page.

One more thing about this tag: We need to specify the language of the website. We do this with an HTML attribute for language. The code looks like this, for the English language:

3. Head and Body

The rest of the website code is split into the <head> and the <body>. The <head> section contains information that describes the web page document. The <body> section contains text and elements that display in the web page document. So far, the code looks like this:

The charset attribute specifies the character encoding for the HTML document. It goes into the website <head></head> as metadata. It looks like this:

5. <title>

Every document needs a title, right? We have one more thing to place into the <head> of the website, the <title> of the page. The code looks like this. The typical way to do it is to first place the page name and then the title name, like this.

The <title> you set for the page displays in the browser bar.

The page title is also very important for SEO.

Putting it together, it all looks like this:

How to Create an HTML Page

With this background, we are ready to start coding in HTML!

This video shows you how to create the framework for an HTML page, starting with the <!DOCTYPE html> and adding the website language in the <html> tag, then the <head> and <body>.

Exercise: Create a Web Page

Follow the steps in the video to make your own web page. Work in the template folder. If you don’t have a file named template.html or index.html, create that now. Here are the steps to take:

• Add <!DOCTYPE html>
• Add the <html lang=”en”></html> tags
• Add the <head></head> tags
• Add the <body></body>tags
• Add  title and meta-charset to the head, <meta charset=”utf-8″> and <title>Template</title>

Your file should look like the image below.

What code should I put in my website template?

1. Code that is used once per website and difficult to remember.

2. Structural code that you want to make sure is in every website. 

The purpose of the template is to put code that you want to type once in your lifetime, like the <!DOCTYPE html> and some of the meta data. There is more of this code coming in future chapters. We will use the template as a starting point for Labs 7-14.

Note: On the videos, I named the website template file, “template.html”. That created a hassle for students, who later needed to rename the file, “index.html” when we duplicated the folder to create new websites. That is why this content and videos are inconsistent. 

Now that we have a web page, we can start adding some content with markup to it.

Heading Tags

(We did this in Module 1, so its a bit of a review.)

The heading you choose, eg. <h1> or <h2> affect the size of the text. 

More importantly, the headings you choose tell the browser and search engines how the web page is organized and what is most important on the page. 

Here are all of the heading tags.

In this video we are going to add some heading tags to our template.

Exercise: Add the <h1> and <h2> tags to your template

Working in your template folder, in your index.html (or template.html) file, add the <h1> and <h2> tags.

Paragraph <p> and Break <br> Tags

Most text on a web page is marked up with the paragraph tag, <p>. The <p> tag is the default tag to put on most text on a webpage. The code looks like this:

In some cases, like on an address, you want to break the text to a new line, but you don’t want the extra space of a paragraph. You would code it like this with a <br> tag:

This video demonstrates how to use the <p> and <br> tags to achieve the look that you want. You will be able to practice this in the lab assignment for this week.

Exercise: <p> and <br> tags

Type in the code as shown below to practice using the <br> tags.

• Use the <br> and <p> as shown
• View in Chrome Browser
• What is the difference between using a <br> and a new <p></p>?

Self-Closing Tags <br> and <hr>

<br> is the break tag

<hr> is the horizontal rule tag

• The <br> and <hr> are self-closing tags. 
• Self-closing tags do not need to be opened and closed. 
• For example the <p></p> tags need to be opened and closed because they aren’t self-closing tags.

Note: In HTML4 the syntax was a bit different. HTML4 used <br/> and <hr/> and HTML5 uses <br> and <hr>.

The horizontal rule can be dressed up with some CSS, which we will start to learn in Module 3.

CSS Tricks Horizontal Rules

Common Markup Elements

• <b> or <strong> for bold text
• <em> for italics
• <small> for small text, like in a footer

You can find more text mark up in Chapter 2 of the textbook or online. Here is a link to some markup elements on W3 Schools .

Nesting Order

Whichever element OPENS first CLOSES last.

BROWSER DISPLAY:

Call for a free quote: 888.555.5555

There are three ways to make lists in HTML

• Unordered List <ul></ul> is a bulleted list.
• Ordered List <ol></ol> is a numbered list
• Description List <dl></dl> is a list of definitions

Ordered and Bulleted (Unordered) Lists

In this video I demonstrate how to create numbered and bulleted lists in HTML. For each item in numbered and bulleted lists, you use the <li> tags.

Exercise: Ordered and Unordered Lists

First we will do the unordered list.

Definition Lists

While definition lists aren’t used very often on websites our lab assignment for today includes one. The video below shows you how to code a definition list.

Exercise: Definition List

Be sure to save the code from this exercise. We will make a definition list in the lab assignment.

The Semantic tags are new to HTML5 and a key part of the structure of a website. For this course your websites should have a minimum these four semantic tags on each web page:

• <header>
• <nav>
• <main>
• <footer>

Some websites you make may have more semantic tags, but virtually every website has at least these four.

Go to a website of your choice. 

What is the header?

What is the nav?

What is the main?

What is the footer?

The semantic elements go around the various major sections of a web page, like this:

This video shows you how to add the semantic tags to your website template:

Exercise: Semantic Tags

Add the semantic tags to your website template. The code looks like this:

The text in white is just there for my convenience. When I copy my template to make a website, the text in white makes it a bit easier to find where to insert my content.

<head><header>and headings….It’s a bit confusing

The developers who created HTML unfortunately used similar names for different parts of the web page. It is easy to mix them up. 

<head> This is where the metadata goes. 

<header> This is a semantic element that goes around the website logo.

<h1><h2>….are headings that go around titles and subtitles in a web page. 

The <div> element is used to used to apply a class, id or style to differentiate from the other code, like with a textbox on a webpage. It’s a generic way to be able to select a part of a web page for stying. We will learn more about how to use divs in upcoming modules. The code may look something like this:

The code above may be used to select a textbox for special styling using an attribute class=”textbox” on the <div> tag. We will be doing a lot more with attributes, but for now you need to know the element for the lab assignment. The <div> tag may be the most used tag after the <p> tag in website HTML.

Most websites use a LOT of <div> elements.You can see them in the Chrome Inspector. 

The website above has more than some websites. It has more because it was created with a Content Management System (WordPress) and a Page Builder (Beaver Builder).

When working in a text editor, if you want to use a special character you need to use an HTML Entity instead of the special character. Here are some common ones:

In this video I demonstrate how to add a copyright tag to your footer.

Exercise: Add Copyright to Your Template Footer

Every website has a copyright, right? So we need to put this into our website template.

• Open your template file 
• Add a copyright to your footer with the ©
• Add the <small>tags around the footer. 

Anchor <a> Tag Links

The coolest thing we learn this week is how to add links to a website. We are going to add links to our website template. Website linking is what brings the Internet to life.

The anchor tag <a> is used to make links to another website or web page.  The text between the <a> and </a> is displayed on the browser screen to the website visitor. Th href (hyperlink reference) attribute tells the browser where to go if someone clicks on your link.

By the way, what’s an HTML attribute?

Attributes look like this:

Inside of the opening tag, you type a space, then the attribute. Attributes have a name, like “href”, then and equal sign, and lastly a value in quotation marks.

Absolute and Relative Links

The types of links that are used most often are absolute and relative links.

Absolute links

• Link to a different website

<a href=”https://saintpaul.edu”>Saint Paul College</a>

Relative links

• Link to pages on your own site. The relative link must be aligned correctly in the website folders.

<a href=”index.html”>Home</a>

Understanding relative links can be a difficult concept. See this blog post for more explanation: Read About Relative Links .

Email Hyperlink

When you click on an email hyperlink you open up the website visitors default email. To make them work, you add “mailto: ” in front of an email address, like this:

<a href=” mailto :[email protected]”>Email Me</a>

In this video I demonstrate how to add links to the website navigation.

Exercise: Add an absolute and relative link to your template

• Open your template file
• Add an absolute link into your <footer>. The http or https is required for absolute links. Here is an example: <a href=”https://saintpaul.edu”>Saint Paul College</a>
• Click on your link in the browser to check to make sure it works
• Add an relative link into your navigation <nav> Example: <a href=”index.html”>Home</a>
• Add an email link to your website footer: <a href=”mailto:[email protected]”>Email Me</a>

After the work we have done in this Module, your template should look something like the image below:

You may have something different in the <main> section. That’s fine, because you will generally delete the main section and start over on each web page.

Showing Your Folders in Your Text Editor

One more quick thing for this module. Since a website is a set of folders and files that work together, it is very helpful to be able to see your folders and files as you work. With Sublime Text there is an easy trick to make this work. This video shows you how to do it.

Lab: Pacific Trails

For this module’s lab we will be using the lab assignment in the back of the textbook. If you go to the exercises in the back of the book for Chapter 2, you will see the Pacific Trails exercise. Start by copying the work you did on your website template.

When I have taught this class in the past I have found that some students had multiple sets of folders and files on their computers, and they would do the homework for one week in one set of files and homework for another week in another set of folders. To repair the damage, they would have to try to reconcile the work in two different sets of files. It is so difficult to reconcile them that it is almost easier to start over than to try to reconcile two or more sets of files. The most important thing to remember is WHERE you have your website folders and files, and to make sure that when you are coding that you are always in the right folder.

The purpose of keeping a template is that you have the code that you will need in EVERY website. You will need a good template to work from when we are done with Pacific Trails. You may also want a good starting point to make websites after you finish this course. The template includes all of the code that you will only want to type one time in your lifetime, like, “<!DOCTYPE html>”. Having the template also makes sure that you have key elements included, like the semantic elements. We will be adding to the template throughout the modules.

I see this happen on computers running Windows. You won’t see it in the File Explorer, but when you open Sublime text you will notice it. The solution is to change your file explorer settings. As a developer, you need to have control of the file extensions, and you need to readily see the file extension. To change the settings, start by opening File Explorer. Click the View tab at the top. Now you will see the settings. Check the File Name Extensions box. While you are there, also click on the Hidden Files. As a developer, you will need to see Hidden Files. Here is a nice article on it: https://knowledge.autodesk.com/support/autocad/learn-explore/caas/sfdcarticles/sfdcarticles/How-to-enable-hidden-file-extensions-in-Windows.html

I’m afraid I don’t have a very satisfying answer. They are called “anchor” tags because when the Internet was young they were used to anchor key places in the text. Now they are mostly used to link to an entirely different page or perhaps to an entirely different website. (You can also use them to link within a webpage.)

When you decide to be a web developer, the first thing that you do is decide how you are going to organize all of the websites you will make. By taking this class, you are “sort of” deciding to be a web developer, at least for this semester. My hope is that you willl enjoy web development so much that you will continue making website beyond this course as a hobby or as a career.  The websites you make in the class and beyond may have a life after the course you are taking. For that reason, I would not organize your websites folder with the other class files on your computer; instead, place the websites folder directly into your Documents folder. Each time you start a new website, add a new folder for that website to your websites folder.  You may have a different way of organizing your computer, and that’s fine too. For example, I back up all of my files to Dropbox, so my websites folder is inside of my Dropbox folder instead of the Documents folder. But the key here is that you make an intentional decision where you will keep all of the websites you will make.  I wouldn’t store the websites solely in the cloud…I would keep a copy on your computer as well.  Because the websites folder isn’t a class folder, I would place the syllabus and other class files in a different place. If it was me, I would make an overall folder called, “courses”, and then I would make a folder for each course I take inside of the courses folder. As a side note, you don’t need to worry about saving any course files. After the class is over your D2L access will vanish, but I have all of the course files (except the Pacific Trails lab assignment) on WebDevStudents.com.

Final Project Websites

• Final Project Description
• Final Project Checklist

Additional Presentations

• The Template Lab (Between Module 6 and 7)
• Study for the HTML/CSS Exam
• PHP Websites
• The Best Internship

Bootstrap Starter Pack

This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.

Download Bootstrap 4 Template

Your browser is not supported. Please upgrade your browser to one of our supported browsers . You can try viewing the page, but expect functionality to be broken.

Web Lab is a programming environment where you can make simple web pages using HTML and CSS. Design your web pages and share your site in seconds.

Ages 13+, all modern browsers, English only

Try the Computer Science Discoveries unit that introduces Web Lab

Unit 2: web development, grades 7 - 9.

Please select your language

Lab 1: Basic HTML and Web Pages

Emily '08 (Art major): "A couple months into working here [a law firm], I realized I had a much, much easier time with the web software than my colleagues -- all because I had learned the basics of HTML in your class! Then, after a heart-stopping incident in which I learned on-the-fly how to restore a broken section of the web (someone accidentally deleted the template for an entire section of the site...oops), the head of my department decided that I should be the sole decision maker for the website, responsible for leading all its content-, design-, and tech-related projects."

Advice: If your web page doesn't work right on myCpanel, use the View Source display in your browser. It will often help you to identify things like files that you didn't upload (or whose names you have spelled wrong, e.g., in the wrong case), missing tag terminators, failure to quote filenames in hrefs, and the like. I find Firefox easier than Chrome or Safari but any of them will be helpful.

Part 1: Introduction Part 2: HTML Framework Part 3: Text Part 4: Links Part 5: Lists Part 6: Graphics and Sound Part 7: Making Your Page Visible with cPanel Part 8: Submitting your work W3Schools web development tutorials and reference

Part 1: Introduction

Web pages and html.

On Windows, you can use Notepad, or you can use WordPad if you save your files as ".txt" format. You can find these programs from the Start menu in places like All Programs | Accessories or All Programs | Basic Applications. Or search for them from the "go" menu. Do not use Word to edit plain text files. On a Mac, you can use TextEdit (in Go | Applications ). Unfortunately TextEdit is too smart for its own good. Use Preferences | New Document to set "Plain Text". Do not use "rich text format" (.rtf). Under Open and Save , uncheck the box that says "Add '.txt' extension to plain text files". When you do this, the ruler at the top of the window should disappear. Uncheck the "Smart" quotes, dashes and links under Preferences | Open and Save in TextEdit to allow you to reopen a file as a text file if you have saved and closed it.

Mac users: Some updagted suggestions for defeating TextEdit: 1. in Preferences, New Document tab select Plain Text turn off smart quotes turn off smart dashes Open / Save tab display HTML files as HTML code Plan text file encoding: customize encoding list Western ASCII for open and save HTML saving Western ASCII 2. Paste the template into an empty TextEdit window 3. GO SLOW HERE Save... change filename to index.html [type the .html extension explicitly!] TextEdit is much too eager to set the wrong defaults and then automatically do things because of the settings.

Viewing Your Work

Part 2: html framework.

Web pages are written in a language called HTML, which stands for HyperText Markup Language. HTML is ordinary text, but it includes formatting information that describes the layout. This extra information is contained in a set of tags , which are ordinary text surrounded by < and > signs. They give the browser information about how to display the text.

<html> <head> <title> Title of the web page goes here </title> </head> <body> Content of the web page goes here </body> </html>

BODY Attributes

The entire framework, part 3: text, regular text and paragraphs, escape codes, text style, size and color, other text tags, part 4: links, text links to other pages, links within a page, part 5: lists, ordered lists, unordered lists, part 6: images and sound.

"If you want to use an object or work, which may include an image, a background pattern, a section of text or a musical, film, television show, or video selection that you would like to use, you should make a good faith effort to determine that such use constitutes a "fair use" under copyright law or you must obtain permission of the owner or copyright-holder. As a general matter, you are free to establish links to Web pages you enjoy and which you would like to share with others. But you are not generally free to copy or redistribute the work of others on World Wide Web (or elsewhere) without authorization and proper attribution."

Adding Images

Adding sound, using images as hypertext links, part 7: making your page visible with cpanel.

If you don't get a confirmation message from OIT about your new cPanel account quite soon, check your Gmail spam folder. Google thinks the confirmation is spam in some cases.

Part 8: Submitting Your Work

EECS448: Lab 3: HTML, CSS, and JavaScript Primer

This lab is due two weeks from the start of your lab session (because of spring break).

This lab (Lab 3) is a primer for web pages. Lab 4 will be about server-side web services, and builds on this lab.

This lab is an individual lab. NOTE : Attendance is required for a grade.

Additional Resources

Html: html, body, and head.

All HTML documents are surrounded by the <html> tag. It is an open and close tag that then contains the <head> and <body> tags. The head contains some of the behind the scenes mechanics. One tag you can put in the head right away is the <title> tag. The title tag controls what a browser tab or window title bar’s text is. The body contains all the content that the is contained with the web page. Every, image, link, paragraph, or table resides here.

HTML: Images

You can put images in your web page, but first you need to pick an image to embed. There are two ways to refer to an image:

Download and use a local image

Refer to the address of an existing image

The img tag is a stand alone tag like the break tag. It doesn’t surround anything. Notice how we added the src="theFileNameHere.jpg" portion? That’s because the tag alone isn’t enough information. We can’t just tell the browser we need an image, we need to tell the browser which image we want. If we just list the file name, the browser will assume it’s in a local folder. What you added was an HTML attribute. All attributes have a similar format: <tag attribute = "value">

You pick some attribute then set it equal to a value in quotation. There are many attributes and values for various tasks. For example, depending on your image, it may be very large. You can control that. You just need to add a height and a width attribute.

You can control the pixel heights and widths of the image. You can also do percentages if you like:

The other way we can display an image in our page is link to an existing one instead of downloading a copy. To do this, you can go back to that image you found and instead of saving a copy, choose "copy image location" (or the wording that matches your browser). You would then replace the file name with this URL. Sometimes these URLs get very long, so you don’t have to do this right now, but it’s good to be aware of. Reference: W3Schools HTML <img> Tag

HTML: Anchor tags

To create clickable links, you will use the anchor tag, or <a> for short. Here’s the template:

For example if I wanted to make a link that took people to google when they clicked on the words "Go to google" I would do the following:

Remember to include the "http://" part. Even though you don’t type that in browsers anymore, you’ll need it in your code. It acts as a flag that tells the browser it need to use the Hyper Text Transfer Protocol, or in other words, it needs to grab something from the internet instead of something local. Reference: HTML Links

HTML paragraphs

Paragraphs are used to create, well, paragraphs. The text get some automatic formatting, like ensuring its not a the same line as some other piece of content. The template is: <p>Your paragraph here</p> Reference: HTML Paragraphs

JavaScript is language that runs client-side and is used to make your HTML pages interactive and responsive. (It is not a scripted version of Java, it's a whole other language.) A lot of syntax is the same or similar to C++/Java:

• if statement (boolean operators)
• functions (mostly)

Important changes:

• All variables are declared with the key words let
• There is no explicit class key word (see reference below)
• JS files don't include each other, instead they are all included in your HTML document

Useful reference and tutorials: W3schools JavaScript Tutorial

Connecting JavaScript to an HTML file

In the head tag of your HTML file, include the script tag:

The script tag is an open-close tag that we can put our JS code in (and it helps modularity to simply link to another file).

JavaScript functions can be called in reaction to an event occurring. For example, we can define a button in HTML to call a JavaScript method.

Other useful events:

• onclick (when a tag is clicked)
• onmouseover (when the mouse browses over a tag)
• onmouseout (when the mouse leaves the area of a tag)
• onload (when a tag is loaded; setting this event in the body tag will call a JavaScript function when the page loads)

Manipulating HTML

JavaScript can manipulate nearly every aspect of an HTML dynamically. To give JavaScript control over an HTML element you must do two steps:

• In the HTML file: Give a tag you want JavaScript to be able to affect an id attribute
• In the JavaScript file: Find the element by it's id and manipulate the attribute in question

Exercise 1: Password validator

Create a webpage that allows the user to enter a password two times in order to validate it. Web page content:

• Two password fields: first to enter the password and a second one to verify it
• The passwords entered don't match
• the passwords are not at least 8 characters long

Exercise 2: Slide show!

Create a new webpage that has a single img tag and two buttons labeled previous and next. Your slideshow should:

• Contain at least five pictures of your choice (appropriate for class)
• Cycle through all the pictures
• Wrap around to the beginning if I keep pushing next
• Wrap around to the end if I keep pushing previous
• Force the images to be all the same size regardless of the original image files' dimensions

Cascading Style Sheets (CSS)

CSS, or Cascading Style Sheet, is a whole other language from HTML (that's right, you’re learning two languages in one day). It's entirely a helper language used to define how HTML should appear. It includes styling details such as, colors, sizes, font families, and background image.

In the same folder your webpage is in, create file called myStyle.css . Note the different extension? That's because this file will only contain CSS code. Now add the following code to your CSS file:

Now, go back to your HTML sheet. Inside the head tag, put the following:

Now make sure all the files are saved and refresh your browser. You should see your paragraph now has a blue background.

All styling code follows this template:

You can style almost any HTML tag. There are many attributes, such as background-color, and values, such as, blue. We’ll discuss a few here.

CSS: Background colors

You already have a background color for your paragraph. Now let’s give one to the whole page! To do so, we'll style the tag that surrounds everything, the body.

There are lots of color keywords, such as red and blue. There are many others, but if you need a very specific color, you can use W3Schools’ color picker. Reference: HTML Color Picker

CSS: text color

You can give the text in your web page it's own color. The "color" attribute colors the color the text inside of a given tag. Example:

Now all paragraphs will have a red background and white text.

There are many things we can change about font. The color attribute controls the color of text, but there are several attributes that apart of the font attribute collection. Here’s an example:

Now all paragraphs will have 22pt (the size), white arial font on a red background. Reference: CSS Fonts and CSS Reference

CSS: Background images

Lots of tags can have a background image. We'll give our web page a particular background image. You could give your lists or paragraphs background images too, but they probably aren't large enough to utilize them well. The following code gives the body a background image of a gif (assuming it is in the same folder) that will stretch to cover 100% of the screen (the size) and not repeat.

You can also play with how the background image behaves when scrolling by tinkering with the position. For example if you don’t want is to move when the user scrolls do the following:

References:

• Basic: http://www.w3schools.com/cssref/pr_background-image.asp
• Position: http://www.w3schools.com/cssref/pr_background-position.asp
• Size: http://www.w3schools.com/cssref/css3_pr_background-size.asp
• Repeat: http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS can also detect some simple events that occur on your page and adjust the styling accordingly. For example, you can change the styling of a tag to respond when a user has their mouse over it. Let's look at two blocks of styling for the anchor tag (our clickable links):

With these two blocks, the user will see red text with a blue background for all links normally, but when they hover over the link, the styling will invert. Now, you can adjust any styling you want. You could make a paragraph that increases its font size when hovered over or a list that changes from arial to courier font when hovered over. Reference: CSS :hover Selector

CSS: classes

Sometimes you don’t want all tags to receive the same styling. One option is to create classes. It’s a two part process. On the CSS side you need to create a styling block that will contain the information for your special tags.

Default paragraphs will have the top block of styling, but any paragraph that I choose to can have the halloween themed styling. I just have to tell HTML which ones I want to be special. To do so, I include the class attribute on the HTML side:

Exercise 3: Personal Profile

Make a profile page that is styled with CSS. Have fun with this. You can make a profile about anybody or anything. You are not required to make this about yourself or post any personal information online. This profile can be entirely fictional. HTML Requirements:

• Profile picture
• Biographical paragraph
• Hyperlinks to favorite web sites
• Embedded youtube video

CSS Requirements:

• Use all the attributes listed in the CSS section at least once
• The page should not induce seizures or headaches - in other words, mind the color pallet you choose
• All text should be easy to read

CSS manipulation through JavaScript

The style attribute.

JavaScript, in addition to accessing and manipulating HTML, can change the styling of any tag you give it access to. The reality is that there is a style attribute that nearly every tag has. For example, one could style a paragraph tag using the style attribute:

Levels of Styling

The previous example was an inline level styling. The other levels of styling, in order of precedence, are:

• inline : the style code is given in the tag (highest precedence, but only applies styling to that one tag)
• document level : the style code is written inside a style tag in the head of the HTML document (second precedence, but only applies to the document it's written in)
• external: what we do in this lab, writing the code in an external CSS sheet (lowest precedence, but the most modular)

The JavaScript style Object

The Document Object Model (DOM) that defines the structure of an HTML document has inside of it a style object. To access the style object, you simply need to access the tag, via its id, like in previous exercises. You can then access the style object of that tag.

Exercise 4: CSS Manipulation

Create a web page that has a paragraph with some dummy text. Near the paragraph have text fields to accept the following values:

• green value

Background color:

Finally, have a button that, when clicked, changes the border and background color to be as specified. You can use either the rgb() method or a color code, but you should tell the user what units they are in (00-FF or 0-255).

NOTE : the names of the style attributes in CSS are all hyphenated (e.g., background-color) but in JavaScript they are nearly all converted to camel-case. Here is a reference of the style properties that JavaScript can access and change.

Exercise 5: Publication

In addition to uploading your code to GitHub, place your files in the public_html folder on your EECS account. You can then access them through the URL:

Note : If you experience any problems with lab equipment or your EECS account, contact the Engineering Technical Support Center immediately. Please be polite and as detailed as possible: Ticket Form

Making an index.html

When you go to your people.eecs page, you'll most likely see a simple file listing. This is the default behavior of apache. To make a landing page, you can write an index.html file. In your index.html

• Use links, JS, or whatever means you like to create a menu to all your other exercises
• Spruce it up with styling so it's more than just four hyper links - apache could have given us that without any effort

If you already are using your default homepage just provide us with a sub-folder URL. Example:

Web Language Summary

"Are all these webpages I look at everyday just text files in directories with code written in them?" Yes, they are.

• [25pts] Exercise 1: Password validator
• [30pts] Exercise 2: Slide show
• [15pts] Exercise 3: Profile
• [20pts] Exercise 4: CSS Manipulation
• [10pts] Exercise 5: Publication

Before the deadline, send an email to your TA with the following information:

Email Subject line: EECS448 LastName FirstName StudentID Lab03

The body of the email should contain:

• The Github URL to your lab03 code
• Your publication URL e.g., people.eecs.ku.edu/~YourOnlineID

Additional Reading

This lab was initially designed by Dr. John Gibbons , and Dr. Alex Bardas .

Page generated Wed, 19 May 2021 16:04:44 +0000

• HTML Basics

Basic HTML Exercises about HTML Links, Paragraphs, Layouts, Tags, & Text Formatting

Steps to Create a Webpage in HTML using Notepad

A website is simply a collection of web-pages. A web page or web documents written in HTML (HyperText Markup Language) . These Web pages can be viewed using any web browser and Internet.

Html Language is used to write code and programs to create a webpage. It is easy to create a webpage and you can learn it with few basic steps mentioned below:

HTML Program or page can be created by many HTML or Text Editors. These editors are software that help us writing our code with easy user interface. Today, we will see how to create a html or webpage using Notepad Editor.

Notepad editor is built-in text editor in Windows Computers. You can find similar editors in Mac and Linux Operating system as well.

There are many advanced HTML editor or software are also available. However, we will recommend using default and simple editor like notepad for the beginners. That is always a good way to start learning HTML.

Creating a Simple HTML Page using Notepad Editor

Follow the four steps below to create your first web page with Notepad.

Step 1: Open Notepad (Windows)

Windows 8 or later: Open the Start Screen and Search (Type Notepad)

Windows 7 or previous Windows: Open Start > Programs > Accessories > Notepad

Step 2: Create a New Document

Go to Notepad Menu: File > New

A New blank document will be opened and you can start writing your first HTML Program here.

Step 3: Write Some HTML code or Program

Write some HTML code. If you do not know about HTML Yet, read few chapters in HTML Tutorials Section .

Write your own HTML code or simply copy the following HTML Simple Program into notepad document.

Step 4: Save the HTML Page

Go to Notepad Menu: File > Save (or use short-key CTRL + S)

It will ask you to Save the file on your computer. Give it a name with .html extension and Save it (for example program.html)

Note: HTML page should be saved with .html extension carefully.

Step 5: View the HTML Page using Browser

Web browsers are programs or software that are used to view Webpages/Websites. You can find Internet Explored by default if using Windows Computer machine. You can also download other popular web browsers such as Google Chrome or Firefox. Use any of them.

Now Simply, open the saved HTML file in any browser: Double click on the file or right-click on the file and choose “Open with” option to select other browser.

You HTML File will be opened in web browser and it will show output based on your html program.

Congratulations if you are able to run your first HTML Program.

You can now learn more about HTML Tags and create more HTML web pages. Using these HTML Pages, you can easily create your own website as well.

Program to see difference between paragraphs & normal text with line break

We can write some text in body and it will be displayed in browser. All text will be displayed in single line until it reach browser window border. If you want to add some line break, you can use <br/> tag.

Another option is to use text between paragraph tag. You can use multiple paragraph tags to display multiple text paragraphs.

Different between HTML Paragraph & Regular line break:

Using <br/> tag, it only add a single line break. While using <p> tag it creates a paragraph with extra spacing before and after the paragraph.

Write an HTML program to display hello world.

Description: You need to write an HTML program to display hello world on screen.

Hint : You need to type Hello World inside the body tag.

Write a program to create a webpage to print values 1 to 5

Description: Write a program to create a webpage to print values 1 to 5 on the screen.

Hint: Put values inside the body tag.

Write a program to create a webpage to print your city name in red color.

Description: Write a program to create a webpage to print your city name in red color.

Hint: You need to put the city name inside the body tag and use color attribute to provide the color.

Write a program to print a paragraph with different font and color.

Description: Create a webpage to print a paragraph with 4 – 5 sentences. Each sentence should be in a different font and color.

Hint: Put the paragraph content inside the body tag and paragraph should be enclosed in <p> tag.

• HTML Exercises Categories
• HTML All Exercises & Assignments
• HTML Top Exercises
• HTML Paragraphs

Computer Systems: A Programmer's Perspective, 3/E (CS:APP3e)

Randal E. Bryant and David R. O'Hallaron , Carnegie Mellon University

Lab Assignments

Students implement simple logical, two's complement, and floating point functions, but using a highly restricted subset of C. For example, they might be asked to compute the absolute value of a number using only bit-level operations and straightline code. This lab helps students understand the bit-level representations of C data types and the bit-level behavior of the operations on data.

A "binary bomb" is a program provided to students as an object code file. When run, it prompts the user to type in 6 different strings. If any of these is incorrect, the bomb "explodes," printing an error message and logging the event on a grading server. Students must "defuse" their own unique bomb by disassembling and reverse engineering the program to determine what the 6 strings should be. The lab teaches students to understand assembly language, and also forces them to learn how to use a debugger. It's also great fun. A legendary lab among the CMU undergrads. Here's a Linux/x86-64 binary bomb that you can try out for yourself. The feature that notifies the grading server has been disabled, so feel free to explode this bomb with impunity. If you're an instructor with a CS:APP account, then you can download the solution .

Note: This is the 64-bit successor to the 32-bit Buffer Lab. Students are given a pair of unique custom-generated x86-64 binary executables, called targets , that have buffer overflow bugs. One target is vulnerable to code injection attacks. The other is vulnerable to return-oriented programming attacks. Students are asked to modify the behavior of the targets by developing exploits based on either code injection or return-oriented programming. This lab teaches the students about the stack discipline and teaches them about the danger of writing code that is vulnerable to buffer overflow attacks. If you're a self-study student, here are a pair of Ubuntu 12.4 targets that you can try out for yourself. You'll need to run your targets using the "-q" option so that they don't try to contact a non-existent grading server. If you're an instructor with a CS:APP acount, you can download the solutions here .

Note: This is the legacy 32-bit lab from CS:APP2e. It has been replaced by the Attack Lab. In the Buffer Lab, students modify the run-time behavior of a 32-bit x86 binary executable by exploiting a buffer overflow bug. This lab teaches the students about the stack discipline and teaches them about the danger of writing code that is vulnerable to buffer overflow attacks.

Note: Updated to Y86-64 for CS:APP3e. Students are given a small default Y86-64 array copying function and a working pipelined Y86-64 processor design that runs the copy function in some nominal number of clock cycles per array element (CPE). The students attempt to minimize the CPE by modifying both the function and the processor design. This gives the students a deep appreciation for the interactions between hardware and software. Note: The lab materials include the master source distribution of the Y86-64 processor simulators and the Y86-64 Guide to Simulators .

Note: Legacy Y86 version for CS:APP2e. Students are given a small default Y86 array copying function and a working pipelined Y86 processor design that runs the copy function in some nominal number of clock cycles per array element (CPE). The students attempt to minimize the CPE by modifying both the function and the processor design. This gives the students a deep appreciation for the interactions between hardware and software. Note: The lab materials include the master source distribution of the Y86 processor simulators and the Y86 Guide to Simulators .

At CMU we use this lab in place of the Performance Lab. Students write a general-purpose cache simulator, and then optimize a small matrix transpose kernel to minimize the number of misses on a simulated cache. This lab uses the Valgrind tool to generate address traces. Note: This lab must be run on a 64-bit x86-64 system.

Students optimize the performance of an application kernel function such as convolution or matrix transposition. This lab provides a clear demonstration of the properties of cache memories and gives them experience with low-level program optimization.

Students implement their own simple Unix shell program with job control, including the ctrl-c and ctrl-z keystrokes, fg , bg , and jobs commands. This is the students' first introduction to application level concurrency, and gives them a clear idea of Unix process control, signals, and signal handling.

Students implement their own versions of malloc , free , and realloc . This lab gives students a clear understanding of data layout and organization, and requires them to evaluate different trade-offs between space and time efficiency. One of our favorite labs. When students finish this one, they really understand pointers!

Students implement a concurrent caching Web proxy that sits between their browser and the rest of the World Wide Web. This lab exposes students to the interesting world of network programming, and ties together many of the concepts from the course, such as byte ordering, caching, process control, signals, signal handling, file I/O, concurrency, and synchronization.

Copyright © 2015 Randal E. Bryant and David R. O'Hallaron

Recent articles from the CS:APP blog

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

HTML&CSS_Lab Assignment 1

GauriSPandit/HTML-CSS_Lab

Folders and files.

• Ohtani’s Former Interpreter Charged With Bank Fraud Due To Theft Of Over $16MM
• Jeferson Quero To Undergo Season-Ending Shoulder Surgery
• Yoán Moncada To Miss Three To Six Months Due To Adductor Strain
• Red Sox Extend Ceddanne Rafaela
• Orioles To Promote Jackson Holliday
• Trevor Story To Undergo Season-Ending Shoulder Surgery
• Hoops Rumors
• Pro Football Rumors
• Pro Hockey Rumors

MLB Trade Rumors

Kyle Bradish To Begin Rehab Assignment

By Darragh McDonald | April 10, 2024 at 5:25pm CDT

The Orioles announced yesterday that Kyle Bradish has joined the squad at High-A Aberdeen and will begin a rehab assignment soon. He’s been on the 15-day injured list since the beginning of the season.

The news is surely pleasant for fans of the O’s, especially considering where things stood just a couple of months ago. Back in the middle of February, Bradish was diagnosed with a sprained ulnar collateral ligament in his right elbow. Since that is the ligament that is repaired in Tommy John surgery, many began to fret that Bradish would need to go under the knife and miss the entire 2024 season and perhaps even part of 2025 as well.

Instead, Bradish received a platelet-rich plasma injection and began a throwing program. Just a few weeks after the initial diagnosis of the sprain, general manager Mike Elias relayed that subsequent MRIs had shown “accelerated healing” of the ligament. The fact that he’s now set to embark on a rehab assignment suggests that things have continued to progress in a positive direction.

The Orioles went into the offseason with a strong roster but the rotation was clearly a relatively weaker part of it. They did make a huge trade to acquire Corbin Burnes but the group still felt a bit lackluster, especially since the O’s could have done more. With a farm system that’s considered by some to be the best in the league and almost no future payroll commitments, they could have done more trading or made a splash in free agency. The latter scenario was especially open to the O’s as starting pitchers languished on the open market well after Bradish’s injury diagnosis, including big names like Blake Snell and Jordan Montgomery or even back-of-the-rotation types like Michael Lorenzen .

The injury to Bradish and the continued absence of John Means left Baltimore with a rotation of Burnes, Grayson Rodriguez , Tyler Wells , Dean Kremer and Cole Irvin to open the year. Last year, Irvin had a 4.81 ERA as a starter and got moved to the bullpen frequently. Wells had a 3.64 ERA last year but with an unsustainable .200 batting average on balls in play and 82.6% strand rate, which is why his 4.98 FIP and 4.19 SIERA weren’t as impressive.

With Bradish now on the mend, that group will be bolstered in a few weeks, assuming everything goes smooth with the rehab. Bradish had a 2.98 ERA last year over his 30 starts. He combined a 25% strikeout rate with a 6.6% walk rate and 49.2% ground ball rate, with all three of those being a few ticks better than league average. The O’s have not moved him to the 60-day IL, so he’ll be eligible to be activated as soon as he’s healthy.

If Bradish returns and the other arms in the rotation are also healthy, the club will have to make a decision about who to bump out. Irvin is out of options but he could perhaps move to a long relief role in the bullpen if he’s the one squeezed out of the rotation.

17 Comments

LET’S GO O’S!!!!!

LET’S GO O’S!!!!!

Good news. There’s been a few, though, that the worst came to fruition after they actually started pitching again, but fingers crossed.

LET’S GO O’s!!!

LET’S O GO’S!

LET’S GO O’S!

…uh, let’s go O’s, I guess.

Has a PRP injection ever worked on a pitcher’s elbow? Meaning returned to pitching effectively without surgery? Not trolling, honest question. Seems like all this ever does is delay the inevitable by a few weeks.

Return in May, get through 6-7 weeks and get the surgery? Then the O’s get a SP at the deadline maybe? Brandish could return before 2025 playoffs.

Cole Hamels avoided it as did some others.

I believe Aaron Nola also avoided it as well.

This is good news, and lets hope that he can pitch effectively without the surgery. As others mentioned, the chances are pretty good that ends up being the result anyway. Hopefully he’s back because Irvin is inadequate. From watching him “feeling pretty good”, yesterday he had a lot of trouble hitting spots and managed to give up 5 runs, 7 hits, and 3 walks in 5.0 innings which simply is nowhere near good enough to have a spot on a supposedly contending rotation. The offense saved him yesterday.

Yea. Can’t stand how these guys make the money they do pitching well below mediocrity. There are a couple of guys in the minors who deserve a shot to start until Means and/or Bradish return.

Leave a Reply Cancel reply

Please login to leave a reply.

Log in Register

• Feeds by Team
• Commenting Policy
• Privacy Policy

MLB Trade Rumors is not affiliated with Major League Baseball, MLB or MLB.com

Username or Email Address

Remember Me

Santa Maria Lab Moves to University of Pittsburgh

Almost everyone will be affected by hearing loss which is often due to age, noise exposure, ear infections and other causes. We are committed to the discovery of novel mechanisms of hearing loss and the drive to translate potential cures.

The Santa Maria Lab is a discovery and translational research lab moving to The University of Pittsburgh in Summer 2024, from Stanford University. The lab is federally funded to explore the immune mechanisms of hearing loss in chronic infectious ear disease but is undertaking large scale efforts to understand immune mechanisms in the ear, tumor biology and chronic bacterial infections and the application of nanotechnology to address these issues.

The lab is expanding and recruiting across all levels including Research Professor, Staff Scientist, Lab Technician and Post-Doctoral Fellow. We are looking for a dedicated and highly motivated researchers to join a collaborative team of scientists to discover mechanisms and potential cures for hearing loss. 

There are three cores of the lab which cover 1) immune mediated mechanisms of hearing loss (including from infection, noise, tumors, autoimmune and immune mediated inner ear disease 2) chronic bacterial infection relapse, centered around mechanisms and treatments for bacterial persisters and 3) tumor biology and immunology (with a focus around skull base tumors e.g. vestibular schwannoma). Our lab works across in vitro and in vivo models of disease to our clinic patients. We are looking for applicants with backgrounds in microbiology, immunology, neuroscience or nanomedicines.

The lab is part of the Pittsburgh Hearing Research Center and will become a central piece in the Pittsburgh Ear Institute. Along with federal funding the lab has a track record of translating its research into clinical trials, licensing technology, industry partnerships and startups. More information about our research and team can be found at:  https://santamarialab.stanford.edu/  or contacting the PI at petersantamaria(at)stanford.edu

04/10/2024: Lab Advisory: CDC Issues Alert for Increase in Global and Domestic Measles Cases and Outbreaks

Audience: Clinical Laboratory Professionals

Level: Laboratory Advisory

On March 18, 2024, the U.S. Centers for Disease Control and Prevention (CDC) issued a Health Alert Network (HAN) message to inform clinicians and public health officials of an increase in global and U.S. measles cases and to provide guidance on measles prevention. Clinical laboratories should review the Lab Tools for Measles for information on collecting and shipping specimens from suspected measles cases.

As a reminder, suspect and confirmed measles cases are immediately reportable to public health, given the need for rapid initiative of case and contact investigations to prevent further spread. Emergency after hours (24/7) on-call contact information for all states can be found at https://www.cste.org/page/EpiOnCall .

For more information, please review the HAN in detail.

We encourage you to share this message widely with your network(s).

Opt in to receive updates from the CDC Laboratory Outreach Communication System.  

Online Resources

• Specimen Collection, Storage, and Shipment | CDC
• For Public Health Professionals | CDC
• If you are a clinical or public health laboratory professional,  contact LOCS .
• For media inquiries,  contact the CDC Newsroom .
• For all other questions,  contact CDC-INFO .

The Laboratory Outreach Communication System

Laboratory Outreach Communication System (LOCS) | Division of Laboratory Systems (DLS)

Center for Laboratory Systems and Response (CLSR)

Centers for Disease Control and Prevention (CDC)

[email protected]

www.cdc.gov/csels/dls/locs

To receive email updates about this page, enter your email address:

• Division of Laboratory Systems (DLS)

Exit Notification / Disclaimer Policy

• The Centers for Disease Control and Prevention (CDC) cannot attest to the accuracy of a non-federal website.
• Linking to a non-federal website does not constitute an endorsement by CDC or any of its employees of the sponsors or the information and products presented on the website.
• You will be subject to the destination website's privacy policy when you follow the link.
• CDC is not responsible for Section 508 compliance (accessibility) on other federal or private website.

Cookie Acknowledgement

This website uses cookies to collect information to improve your browsing experience. Please review our Privacy Statement for more information.

• College of Engineering
• News Center

Hartzell Engine Tech elevates manufacturing practices through Tiger Motors training

Published: Apr 12, 2024 10:00 AM

By Carla Nelson

Hartzell Engine Tech, a Montgomery-based supplier of aircraft cabin heating solutions and engine accessories, recently spent two days participating in lean manufacturing training in Auburn University’s Tiger Motors Lab.

Housed in the Department of Industrial and Systems Engineering, the Tiger Motors Lab, commonly referred to as the Lego Lab, offers experiential learning opportunities with Toyota Production System principles through industry training. The training was led by Tom Devall, director of the lab and auto manufacturing initiatives for the department.

Kimberly Matheson-Nevala, a supply chain project manager for Hartzell, described the training as an enlightening experience.

“Led by knowledgeable instructors, the training provided a deep dive into the principles and practices that have revolutionized manufacturing, with a particular focus on the history and methodologies pioneered by Toyota,” she said.

Matheson-Nevala said a highlight of the training was exploring of the pull system manufacturing method, which challenged traditional production and emphasized the importance of demand-driven processes. She said she was also interested to learn more about the impactful concept of Kaizen, a concept referring to business activities that continuously improve all functions and involve all employees.

“Learning how small, incremental improvements can drive significant positive change within organizations was truly eye-opening,” she said. “The emphasis on continuous improvement resonated deeply, highlighting the transformative potential of embracing a culture of Kaizen.”

The training allows participants to see the manufacturing process from different angles while working in different positions in the lab. Supply Chain Project Manager Dawn McCord said she now has more appreciation for the work that Hartzell’s employees do daily in various departments. 

“The Tiger Motors training has increased my understanding of how I can support the various departments in my role as supply chain project manager,” McCord said. “The gentle reminders that empathy, trust and humility are essential traits of highly effective leadership were great to hear as well.  I will continue to build upon those foundational traits inside our organization.”

Dave Bailey, vice president of operations excellence, viewed the training as a fresh perspective for the employees.

“The training received at Tiger Motors was beneficial to both the individual and the company,” he said. “This training will help as we continue to raise our manufacturing facilities to the next level. We will be sending more employees to receive this training in the future.”

Housed in the Department of Industrial and Systems Engineering, the Tiger Motors Lab offers experiential learning opportunities with Toyota Production System principles through industry training.

Featured Faculty

Industrial and Systems Engineering

Recent Headlines

Watch CBS News

Guide dog nicknamed Dogfather retires after fathering over 300 puppies

By Christopher Brito

April 11, 2024 / 4:04 PM EDT / CBS News

A guide dog, appropriately nicknamed the "Dogfather," is retiring after fathering more than 300 puppies.

Guide Dogs , a charity that helps pair dogs with people with vision impairment in the U.K., announced this week that their 9-year-old golden retriever Trigger won't be part of their breeding program any longer. 

"Trigger's legacy can be seen in the independence and confidence his progeny has brought to the lives of blind and partially sighted people all over Britain," Guide Dogs said in a news release. Trigger is the father of many guide dogs in U.K. cities, including London, Glasgow and Cardiff, and two of his litters were born abroad in France and the Netherlands. 

According to Guide Dogs, 294 puppies have been bred by the nonprofit and 29 other pups were bred via assistance dog charities and guide dog schools, making Trigger the father of 323 pups. He is a dad to 39 liters, including one in 2021 that saw 16 puppies, a record for Guide Dogs, the charity said. 

His last litter was made up of five daughters named Jenny, Rita, Hermione, Sandy, Indy, and, one son Billy. The 8-week-old puppies were the last of the "Triglets" –  a name affectionately given to Trigger's offspring. 

Janine Dixon, the head of breeding operations at Guide Dogs, said in a statement that the dog's "wonderful, gentle nature and excellent health" made him a "perfect asset" for the breeding program. 

"We can't overstate the impact that Trigger has in helping us to provide so many guide dogs for people with sight loss," Dixon said. Nine of his daughters and son Pierre will help bring forward a new generation of guide dogs, Dixon added.

Trigger will remain in Banbury, England with his breeding dog volunteer Sarah Byrne, who will now adopt him after looking after him for the last seven years. 

Christopher Brito is a social media manager and trending content writer for CBS News.

More from CBS News

Olympic triathlon might be impacted by Seine River pollution

Accused killer reportedly leads officials to missing teen's remains

Colombia police arrest 73-year-old American for giving "cannabis tours"

Memphis police officer killed in shooting; 1 suspect dead

• Grand Rapids/Muskegon
• Saginaw/Bay City
• All Michigan

‘Sixth starter’ back for another doubleheader assignment with Tigers

• Updated: Apr. 12, 2024, 5:19 p.m. |
• Published: Apr. 12, 2024, 5:05 p.m.

Detroit Tigers starting pitcher Matt Manning throws against the New York Mets during the fourth inning in the second game of a baseball doubleheader, Thursday, April 4, 2024, in New York. (AP Photo/Noah K. Murray) AP

• Evan Woodbery | [email protected]

DETROIT -- For the second time in the young season, the Detroit Tigers will summon right-handed pitcher Matt Manning from Triple-A Toledo to help out in a doubleheader.

Manning, who was already in the Tigers’ clubhouse on Friday afternoon, will start Game 2 of Saturday’s doubleheader against the Minnesota Twins.

Tigers' medical report for today... pic.twitter.com/tSg1uGaixB — Evan Woodbery (@evanwoodbery) April 12, 2024

If you purchase a product or register for an account through a link on our site, we may receive compensation. By using this site, you consent to our User Agreement and agree that your clicks, interactions, and personal information may be collected, recorded, and/or stored by us and social media and other third-party partners in accordance with our Privacy Policy.

Survey tallies consumer attitudes toward lab-grown meat alternatives

• Story by Steve Koppes
• April 10, 2024

M any consumers view conventional meats as both tastier and healthier than laboratory-grown alternatives, according to the March Consumer Food Insights Report .

The survey-based report out of Purdue University’s Center for Food Demand Analysis and Sustainability assesses food spending, consumer satisfaction and values, support of agricultural and food policies and trust in information sources. Purdue experts conducted and evaluated the survey, which included 1,200 consumers across the U.S.

This month’s report explores consumer perceptions of and willingness to try exotic and cultivated meats. The report highlights differing responses to queries based on meat type: conventional (non-cultivated) or cultivated. The researchers use the term “conventional” meat to describe meat that is sourced conventionally — bred and raised or hunted, slaughtered and butchered. Cultivated meat is grown or cultivated in a laboratory from animal cells.

Focusing on familiar meats that Americans can find in any grocery store, such as beef and chicken, center researchers saw a big difference between the perceived taste and healthfulness of conventional versus cultivated versions of these meats. The conventional versions received a higher average rating in both aspects.

“We see similar results when evaluating consumers’ willingness to try conventional and cultivated meats in a restaurant setting,”  said the report’s lead author, Joseph Balagtas , professor of agricultural economics at Purdue and director of CFDAS. For common meats, such as beef, chicken and pork, the researchers found that about 90% or more of consumers are willing to try conventional or noncultivated meats.

“The proportion of consumers willing to try the cultivated versions of these meats is around 30 percentage points lower, though it is still a majority, about 60%,” Balagtas said. “Given the fact that cell-cultured meat is not widely available, these results reflect consumer distrust of the unknown when it comes to food, which is a barrier for any novel food trying to break into the market.”

Among consumers unwilling to try conventional chicken, cow and pig, however, around 46%, 26% and 22%, said they are willing to try cultivated versions of these meats, respectively. “This shows that there may be market for cultivated meat among a sizeable portion — albeit small number — of consumers who do not eat meat along with a majority of consumers who already are willing to try conventional versions of these meats,” he said. 

The questions about exotic and cultivated meats stemmed from a collaboration with Jacob Schmiess, a Purdue PhD student in agricultural economics, who co-authored this month’s report. The results showed that fewer consumers are willing to try exotic meats, though around 50% say they are willing to try professionally prepared octopus, shark and ostrich. 

“Again, we see a willingness to try cultivated versions of these meats drop significantly,” Schmiess said.

The CFDAS team broke down the results for these and other questions on the March survey by employment status. The researchers compared consumers of working age (ages 18-64) who are working and not, as well as seniors (ages 65-plus) who are working and not. The researchers combined the last 27 months of data (January 2022 to March 2024) for their analysis.

The team has been tracking a sustainable food purchasing (SFP) index every month since 2022, and quarterly since the start of 2024. The index is a self-reported measure of food purchasing designed to assess how well consumer shopping habits align with healthy diets from sustainable food systems based on components from the EAT-Lancet Commission .

The SFP index reveals that retirement-age consumers score higher overall than those of working age regardless of employment status. “This disparity is driven primarily by the differences in the ‘economic’ and ‘security’ sub-indicators, which measure consumers’ current ability or plans to buy a variety of nutritious and safe foods that fit their budgets,” Balagtas said. “Wealth tends to correlate with age, so finances may be less of a constraint for retirement-age individuals, resulting in higher scores.”

Consumers reported $190 in average weekly total food spending. This is 2.5% more than in March 2023 and 7.3% more than in March 2022. The consumer estimate of food inflation rose from 6.0 % in February to 6.5% in March.

“Similarly, expected food inflation rose to 4%,” said Elijah Bryant, a survey research analyst at CFDAS and co-author of the report. “We continue to see consumer inflation estimates diverge from the consumer price index measure of food inflation, which dropped to 2.2%.

“Recent media attention to food prices may be driving consumer pessimism about food inflation and future food costs, despite the CPI indicating that food inflation is on the decline,” Bryant said. “While prices do continue to rise, they are not quite rising at the high rate perceived by the average American.”

Retired consumers reported their household food spending as $168 per week in March, almost $40 less than younger working adults ($206 per week). “A substantially larger proportion of working-age adults share their households with more than two people,” Bryant said. “More mouths to feed mean more food must be bought to sustain all members of the household.”

Food security remained unchanged at 12.4% from February to March. “When aggregating all 27 months of data, we see that the food insecurity rate is much higher among working-age adults who are not currently employed (27%),” Bryant said.

People of retirement age are the most food secure, with only 3% of those who are 65-plus being food insecure. Participation in the U.S. Department of Agriculture’s Supplemental Food Nutrition Program (SNAP) showed a similar difference, with around one-third of those who are not working but are of working age reporting that they or someone in their household received SNAP benefits in March. 

“The increased use of SNAP benefits among this cohort since January 2022 might be the result of high food inflation in 2022. While annual food inflation has cooled substantially since 2022, it remains positive, which means prices continue to rise. Higher prices can strain the food budgets of those who are out of work or maybe are unable to work, which might be why we are seeing an increase in food assistance use among this group over time. Bryant said.

In addition, survey results showed that consumer beliefs about food claims appear to vary more based on a respondent’s age rather than employment status, Bryant noted. “We see a smaller proportion of retirement-age individuals agreeing with statements about the healthfulness of plant-based milk over conventional dairy milk, or the taste of grass-fed beef over the taste of grain-fed beef relative to working-age adults,” he said.

The researchers further examined how trust in federal organizations and initiatives as information sources on healthy and sustainable foods has changed over time. “We observe an increase in the level of consumer trust in organizations such as the USDA and the U.S. Food and Drug Administration and in the Dietary Guidelines for Americans, a government program with a mission to support healthy diets.

“It will be interesting to see if this positive trend in trust continues or if consumer sentiment shifts as many Americans turn their attention to U.S. politics this year,” Bryant said.

The Center for Food Demand Analysis and Sustainability is part of Purdue’s Next Moves in agriculture and food systems and uses innovative data analysis shared through user-friendly platforms to improve the food system. In addition to the Consumer Food Insights Report, the center offers a portfolio of online dashboards .

Featured Stories

The Boilermaker Butcher Block’s selections will now include farm fresh eggs laid by Purdue...

In the spirit of building a community to manage and protect the world’s forests, Liang and...

Many people are involved in the remarkable range of programs, services and facilities that...

The upcoming solar eclipse on April 8 has drawn the attention of scientists and the general...

U.S. farmers’ perspective on the future improved in March helping to push the Purdue...

If it’s one thing Nick Gallina knows, it’s the value of perseverance. Growing up in...