Continue

Html lecture notes

Lecture Notes DERIVED CATEGORIES. ANN ARBOR (pdf) Literature (pdf) Chapters 1-10(pdf) Corrections (pdf) OpenCourseWare Donate Brian Yu brian@cs.harvard.edu David J. Malan malan@harvard.edu Facebook GitHub Instagram LinkedIn ORCID Quora Reddit Twitter Welcome back to lecture 1! In lecture 0, we introduced HTML, CSS, and Sass
as tools we can use to create some basic web pages. Today, we’ll be learning about using Git and GitHub to help us in developing web programming applications. Git Git is a command line tool that will help us with version control in several different ways: Allowing us to keep track of changes we make to our code by saving snapshots of our code at a
given point in time. Allowing us to easily synchronize code between different people working on the same project by allowing multiple people to pull information from and push information to a repository stored on the web. Allowing us to make changes to and test out code on a different branch without altering our main code base, and then merging
the two together. Allowing us to revert back to earlier versions of our code if we realize we’ve made a mistake. In the above explanations, we used the word repository, which we haven’t explained yet. A Git repository is a file location where we’ll store all of the files related to a given project. These can either be remote (stored online) or local (stored
on your computer). GitHub GitHub is a website that allows us to store Git repositories remotely on the web. Let’s get started by creating a new repository online Make sure that you have a GitHub account set up. If you don’t have one yet, you can make one here. Click the + in the top-right corner, and then click “New repository” Create a repository
name that describes your project (Optional) Provide a description for your repository Choose whether the repository should be public (visible to anyone on the web) or private (visible just to you and others you specifically grant access) (Optional) Decide whether you want to add a README, which is a file describing your new repository. Once we have
a repository, we’ll probably want to add some files to it. In order to do this, we’ll take our newly created remote repository and create a copy, or clone, of it as a local repository on our computer. Make sure you have git installed on your computer by typing git into your terminal. If it is not installed, you can download it here. Click the green “Clone or
Download” button on your repository’s page, and copy the url that pops down. If you didn’t create a README, this link will appear near the top of the page in the “Quick Setup” section. In your terminal, run git clone . This will download the repository to your computer. If you didn’t create a README, you will get the warning: You appear to have
cloned into an empty repository. This is normal, and there’s no need to worry about it. Run ls, which is a command that lists all files and folders in your current directory. You should see the name of the repository you’ve just cloned. Run cd to change directory into that folder. Run touch to create a new file in that folder. You can now make edits to that
file. Alternatively, you can open the folder in your text editor and manually add new files. Now, to let Git know that it should be keeping track of the new file you’ve made, Run git add to track that specific file, or git add . to track all files within that directory. Commits Now, we’ll start to get into what Git can be really useful for. After making some
changes to a file, we can commit those changes, taking a snapshot of the current state of our code. To do this, we run: git commit -m "some message" where the message describes the changes you just made. After this change, we can run git status to see how our code compares to the code on the remote repository When we’re ready to publish our
local commits to Github, we can run git push. Now, when we go to GitHub in our web browser, our changes will be reflected. If you’ve only changed existing files and not created new ones, instead of using git add . and then git commit..., we can condense this into one command: git commit -am "some message". This command will commit all the
changes that you made. Sometimes, the remote repository on GitHub will be more up to date than the local version. In this case, you want to first commit any changes, and then run git pull to pull any remote changes to your repository. Merge Conflicts One problem that can emerge when working with Git, especially when you’re collaborating with
other people, is something called a merge conflict. A merge conflict occurs when two people attempt to change a file in ways that conflict with each other. This will typically occur when you either git push or git pull. When this happens, Git will automatically change the file into a format that clearly outlines what the conflict is. Here’s an example
where the same line was added in two different ways: a = 1 > 56782736387980937883 c = 3 d = 4 e = 5 In the above example, you added the line b = 2 and another person wrote b = 3, and now we must choose one of those to keep. The long number is a hash that represents the commit that is conflicting with your edits. Many text editors will also
provide highlighting and simple options such as “accept current” or “accept incoming” that save you the time of deleting the added lines above. Another potentially useful git command is git log, which gives you a history of all of your commits on that repository. Potentially even more helpful, if you realize that you’ve made a mistake, you can revert
back to a previous commit using the command git reset in one of two ways: git reset --hard reverts your code to exactly how it was after the specified commit. To specify the commit, use the commit hash associated with a commit which can be found using git log as shown above. git reset --hard origin/master reverts your code to the version currently
stored online on Github. Branching After you’ve been working on a project for some time, you may decide that you want to add an additional feature. At the moment, we may just commit changes to this new feature as shown in the graphic below But this could become problematic if we then discover a bug in our original code, and want to revert back
without changing the new feature. This is where branching can become really useful. Branching is a method of moving into a new direction when creating a new feature, and only combining this new feature with the main part of your code, or the main branch, once you’re finished. This workflow will look more like the below graphic: The branch you
are currently looking at is determined by the HEAD, which points to one of the two branches. By default, the HEAD is pointed at the master branch, but we can check out other branches as well. Now, let’s get into how we actually implement branching in our git repositories: Run git branch to see which branch you’re currently working on, which will
have an asterisk to the left of its name. To make a new branch, we’ll run git checkout -b Switch between branches using the command git checkout and commit any changes to each branch. When we’re ready to merge our two branches together, we’ll check out the branch we wish to keep (almost always the master branch) and then run the command
git merge . This will be treated similarly to a push or pull, and merge conflicts may appear. More GitHub Features There are some useful features specific to GitHub that can help when you’re working on a project: Forking: As a GitHub user, you have the ability to fork any repository that you have access to, which creates a copy of the repository that
you are the owner of. We do this by clicking the “Fork” button in the top-right. Pull Requests: Once you’ve forked a repository and made some changes to your version, you may want to request that those changes be added to the main version of the repository. For example, if you wanted to add a new feature to Bootstrap, you could fork the repository,
make some changes, and then submit a pull request. This pull request could then be evaluated and possibly accepted by the people who run the Bootsrap repository. This process of people making a few edits and then requesting that they be merged into a main repository is vital for what is known as open source software, or software that created by
contributions from a number of developers. GitHub Pages: GitHub Pages is a simple way to publish a static site to the web. (We’ll learn later about static vs dynamic sites.) In order to do this: Create a new GitHub repository. Clone the repository and make changes locally, making sure to include an index.html file which will be the landing page for
your website. Push those changes to GitHub. Navigate to the Settings page of your repository, scroll down to GitHub Pages, and choose the master branch in the dropdown menu. Scroll back down to the GitHub Pages part of the settings page, and after a few minutes, you should see a notification that “Your site is published at: …” including a URL
where you can find your site! That’s all for this lecture! Next time, we’ll be looking at Python! UNIX Tutorial for Beginners Unix Commands List of Unix Commands VI Editor Hypertext Transfer Protocol at W3C HTTP Made Easy Understanding HTTP On SGML and HTML SGML History Proof reading Symbols W3C HTML Form Specification HTML
Forms Tutorial Forms Tutorial JQuery Tutorial Learn JQuery Introduction to the DOM HTML and DOM JavaScript and DOM CSS and DOM Adobe PhotoShop Tutorial PhotoShop Tutorials PhotoShop Handout Perl Tutorial at Leeds Learn Perl Picking up Perl Everything Perl SQL Injections W3C XML Page W3C Amaya Browser Jakob Nielsen's Website
Web Style Guide Rapid Web Development and Testing with Firefox Font Comparison Tool Programming the World Wide Web by Robert Sebesta Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics by Jennifer Niederst Robbins and Aaron Gustafson CSS: The Definitive Guide by Eric Meyer JavaScript: The Definitive
Guide by David Flanagan Dynamic HTML: The Definitive Reference by Danny Goodman PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide by Larry Ullman Programming Collective Intelligence: Building Smart Web 2.0 Applications by Toby Seagram Building Scalable Web Sites: Building, scaling, and optimizing the next generation of
web applications by Cal Henderson High Performance Web Sites: Essential Knowledge for Front-End Engineers by Steve Soulders Designing Web Usability by Jakob Nielsen Don't Make Me Think by Steve Krug User-Centered Website Development by Daniel McCracken and Rosalee Wolfe This is an introductory course on Statistical Mechanics and
Thermodynamics given to final year undergraduates. They were last updated in May 2012. Full lecture notes come in around 190 pages. Individual chapters and problem sets can also be found below. PostScript PDF A second course on statistical mechanics, covering non-equilibrium phenomena, can be found here. A third course on statistical
mechanics, covering critical phenomena, can be found here. Content 1. Fundamentals of Statistical Mechanics: PDF Introduction; Microcanonical Ensemble; Entropy and the Second Law; Temperature; Two-State Spin System; First Law of Thermodynamics; Canonical Ensemble; Energy Fluctuations; Chemical Potential; Grand Canonical Ensemble. 2.
Classical Gases: PDF Classical Partition Functions; Ideal Gas; Equipartition; Maxwell Distribution; Diatomic Gas; Interactions; van der Waals Equation of State; Cluster Expansion; Debye-Huckel model. 3. Quantum Gases: PDF Density of States; Blackbody Radiation; Debye Model of Vibrations in a Solid; Diatomic Gas Revisted, Bose-Einstein
Distribution and Bose-Einstein Condensation; Fermi-Dirac Distribution and Fermi Gas; White Dwarfs; Pauli Paramagnetism; Landau Diamagnetism. 4. Classical Thermodynamics: PDF Temperature and the Zeroth Law; The First Law; The Second Law; Carnot Cycles; Entropy; Adiabatic Surfaces; Maxwell Relations; The Third Law. 5. Phase
Transitions: PDF van der Waals equation Revisited; Phase Equilibrium; Maxwell Construction; Clausius-Clapyron Equation; Critical Point; Ising Model; Mean Field Theory; Critical Exponents; Ising Chain; Low Temperature Expansion and Peierls Droplets; High Temperature Expansion; Kramers-Wannier Duality; Landau Theory; Lee-Yang Zeros;
Landau-Ginzburg Theory; Fluctuations and Correlations. E.T. Jaynes on the Gibb's Paradox. 1. HTML TUTORIAL What is HTML? HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • HTML uses
markup tags to describe web pages HTML Tags HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like • HTML tags normally come in pairs like and • The first tag in a pair is the start tag, the second tag is the end tag • Start and end tags are also called opening tags and closing tags HTML
Documents = Web Pages • HTML documents describe web pages • HTML documents contain HTML tags and plain text • HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page: My First Heading My first paragraph. 2. Example Explained • The text between and describes the web page • The text between and is the visible page content • The text between and is displayed as a heading • The text between and is displayed as a paragraph Editing HTML HTML can be written and edited
using many different editors like Dreamweaver and Visual Studio. However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML. .HTM or .HTML File Extension? When you save an HTML file, you can use either the .htm or the .html file extension. There is no
difference; it is entirely up to you. HTML Headings HTML headings are defined with the to tags. Example This is a heading This is a heading This is a heading HTML Paragraphs HTML paragraphs are defined with the tag. Example This is a paragraph. This is another paragraph. 3. HTML Links HTML links are defined with the tag. Example This is a
link Note: The link address is specified in the href attribute. (You will learn about attributes in a later chapter of this tutorial). HTML Images HTML images are defined with the tag. Example Note: The name and the size of the image are provided as attributes. 4. HTML Elements An HTML element is everything from the start tag to the end tag: Start
tag * Element content End tag * This is a paragraph This is a link
* The start tag is often called the opening tag. The end tag is often called the closing tag. HTML Element Syntax • An HTML element starts with a start tag / opening tag • An HTML element ends with an end tag / closing tag • The element content is everything between the start and the end tag • Some HTML elements have empty content • Empty
elements are closed in the start tag • Most HTML elements can have attributes Tip: You will learn about attributes in the next chapter of this tutorial. Nested HTML Elements Most HTML elements can be nested (can contain other HTML elements). HTML documents consist of nested HTML elements. HTML Document Example This is my first
paragraph. 5. The example above contains 3 HTML elements. HTML Example Explained The element: This is my first paragraph. The element defines a paragraph in the HTML document. The element has a start tag and an end tag . The element content is: This is my first paragraph. The element: This is my first paragraph. The element defines the
body of the HTML document. The element has a start tag and an end tag . The element content is another HTML element (a p element). The element: This is my first paragraph. The element defines the whole HTML document. The element has a start tag and an end tag . The element content is another HTML element (the body element). Don't Forget
the End Tag Some HTML elements might display correctly even if you forget the end tag: This is a paragraph This is a paragraph 6. The example above works in most browsers, because the closing tag is considered optional. Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag . Empty HTML
Elements HTML elements with no content are called empty elements.
is an empty element without a closing tag (the
tag defines a line break). Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like
, is the proper way of closing empty elements in XHTML (and XML). HTML Tip: Use Lowercase Tags HTML tags are not case sensitive: means the same as . Many web sites use uppercase HTML tags. HTML Attributes • HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified
in the start tag • Attributes come in name/value pairs like: name="value" Attribute Example HTML links are defined with the tag. The link address is specified in the href attribute: Example This is a link 7. Always Quote Attribute Values Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style
quotes are also allowed. Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson' HTML Tip: Use Lowercase Attributes Attribute names and attribute values are case-insensitive. Newer versions of (X)HTML will demand lowercase attributes. HTML Attributes
Reference A complete list of legal attributes for each HTML element is listed in our: Below is a list of some attributes that are standard for most HTML elements: Attribute Value Description class classname Specifies a classname for an element id id Specifies a unique id for an element style style_definition Specifies an inline style for an element title
tooltip_text Specifies extra information about an element (displayed as a tool tip) For more information about standard attributes: HTML Headings Headings are defined with the to tags. defines the most important heading. defines the least important heading. Example This is a heading This is a heading This is a heading 8. Note: Browsers
automatically add some empty space (a margin) before and after each heading. Headings Are Important Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use
headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on. HTML Lines The tag creates a horizontal line in an HTML page. The hr element can be used to separate content: Example This is a paragraph This is a paragraph This is a paragraph
HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. 9. Comments are written like this: Example Note: There is an exclamation point after the opening bracket, but not before the closing bracket. HTML Tip - How to View HTML
Source Have you ever seen a Web page and wondered "Hey! How did they do that?" To find out, right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page. HTML Tag Reference You will learn more about HTML tags and attributes
in the next chapters of this tutorial. Tag Description Defines an HTML document Defines the document's body to Defines HTML headings Defines a horizontal line Defines a comment HTML Paragraphs Paragraphs are defined with the tag. Example This is a paragraph This is another paragraph Note: Browsers automatically add an empty line before
and after a paragraph. 10. Don't Forget the End Tag Most browsers will display HTML correctly even if you forget the end tag: Example This is a paragraph This is another paragraph The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors. Note: Future version of HTML will
not allow you to skip end tags. HTML Line Breaks Use the
tag if you want a line break (a new line) without starting a new paragraph: Example This is
a para
graph with line breaks The
element is an empty HTML element. It has no end tag.
or
In XHTML, XML, elements with no end tag (closing tag) are not allowed. Even if
works in all browsers, writing
instead works better in XHTML and XML applications. HTML Output - Useful Tips You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. 11. The browser will remove extra spaces
and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space. HTML Tag Reference Tag Description Defines a paragraph
Inserts a single line break 12. HTML Text Formatting This text is bold This text is big This text is italic HTML Formatting Tags HTML uses tags like and for formatting output, like bold or italic text. These HTML tags are called formatting tags (look at the bottom of this page for a complete reference). Often renders as , and renders as . However, there
is a difference in the meaning of these tags: or defines bold or italic text only. or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive
for example and not bold! HTML Text Formatting Tags Tag Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text 13. HTML "Computer Output" Tags Tag Description Defines computer
code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text HTML Citations, Quotations, and Definition Tags Tag Description Defines an abbreviation Defines an acronym Defines contact information for the author/owner of a document Defines the text direction Defines a long
quotation Defines a short quotation Defines a citation Defines a definition term HTML Fonts The example below shows how the HTML could look by using the tag: Example This paragraph is in Arial, size 5, and in red text color. This paragraph is in Verdana, size 3, and in blue text color. 14. HTML Styles - CSS CSS is used to style HTML elements.
Look! Styles and colors This text is in Verdana and red This text is in Times and blue This text is 30 pixels high Styling HTML with CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: • in separate style sheet files (CSS files) • in the style element in the
HTML head section • in the style attribute in single HTML elements Using the HTML Style Attribute It is time consuming and not very practical to style HTML elements using the style attribute. The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files. However, in this HTML tutorial we will introduce you to CSS using the
style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself. 15. HTML Style Example - Background Color The background-color property defines the background color for an element: Example This is a heading This is a paragraph. The background-color property makes the "old" bgcolor
attribute obsolete. HTML Style Example - Font, Color and Size The font-family, color, and font-size properties define the font, color, and size of the text in an element: Example A heading A paragraph. The font-family, color, and font-size properties make the old tag obsolete. 16. HTML Style Example - Text Alignment The text-align property specifies
the horizontal alignment of text in an element: Example Center-aligned heading This is a paragraph. The text-align property makes the old tag obsolete. Deprecated Tags and Attributes In HTML 4, several tags and attributes were deprecated. Deprecated means that they will not be supported in future versions of HTML. The message is clear: Avoid
using deprecated tags and attributes! These tags and attributes should be avoided: Tags Description Deprecated. Defines centered content and Deprecated. Defines HTML fonts and Deprecated. Defines strikethrough text Deprecated. Defines underlined text Attributes Description align Deprecated. Defines the alignment of text bgcolor Deprecated.
Defines the background color color Deprecated. Defines the text color For all of the above: Use styles instead! 17. HTML Links Links are found in nearly all Web pages. Links allow users to click their way from page to page. HTML Hyperlinks (Links) A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new
document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the tag. The tag can be used in two ways: 1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the
name attribute HTML Link Syntax The HTML code for a link is simple. It looks like this: Link text The href attribute specifies the destination of a link. Example Link-text goes here Image-link: Apples Bananas Cherries Entities < is the same as < > is the same as > © is the same as ©

94217685713.pdf
160a80ee7ce93b---9625940069.pdf
16854495529.pdf
160a613de441c4---96183317590.pdf
erasmus plus programme guide 2019 pdf
aditya hridayam in sanskrit pdf
how to write salary hike request letter
160c467604e57c---tamurunosekakodebotomuj.pdf
73045134741.pdf
64472400136.pdf
autopsy of jane doe sub indo
nelodazalufurujufofutek.pdf
which substance has the higher boiling point
ilayaraja flute collection mp3 free download
folevedoxuvevibijoli.pdf
kanmani novels pdf free download
55180877937.pdf
acronis boot media iso
4267106211.pdf
deprivation of liberty easy read guide
milaku.pdf
bahubali 2 hindi movie filmywap
mr. coffee bvmc-sjx33gt 12-cup coffee maker
nintendo switch trade in cash gamestop
86229653179.pdf
1608cf90721ed1---4000733842.pdf
definition implementation guidelines